$tablet: 768px;
$desktop: 1230px;

@import '@/bulma/utilities/_all.sass';
@import '@/styles/variables';
@import '@/styles/font-styles';

.mediaList {
  display: block;
  width: 100%;
}

.title {
  @extend .subtitle;

  color: $black;
  margin-bottom: 30px;
  padding-left: 12px;

  @include mobile {
    padding: 0 12px;
    margin-bottom: 15px;
  }
}

.picture {
  display: block;
  margin: 20px 0;

  img {
    display: block;
    width: 100%;
  }

  @include tablet-only {
    margin: 10px 0;

    &:last-child {
      margin-bottom: 0;
    }
  }

  @include mobile {
    margin: 10px 0;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.videoContainer {
  margin: 20px 0;

  @include mobile {
    margin: 10px 0;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;

  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
}

.lower {
  @extend .body-regular;

  color: $gray-004;
  padding-left: 48px;

  @include tablet-only {
    padding-left: 20px;
  }

  @include mobile {
    padding-left: 10px;
  }
}