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

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

.secondaryVideo {
  display: block;
}

.titleContainer {
  padding-top: 54px;

  @include tablet-only {
    padding: 0;
    margin-bottom: 24px;
  }

  @include mobile {
    padding: 0;
  }
}

.title {
  @extend .subtitle;

  color: $black;
  margin-bottom: 20px;

  @include tablet-only {
    margin-bottom: 5px;
  }

  @include mobile {
    margin-bottom: 5px;
  }
}

.description {
  white-space: pre-line;
  
  @include mobile {
    margin-bottom: 20px;
  }
}

.description,
.lower {
  @extend .body-regular;

  color: $gray-004;
}

.lower {
  margin-left: 41.6666666667%;
  width: 58.3333333333%;
  padding: 0 0.75rem;
}

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

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

  @include mobile {
    margin-bottom: 5px;
  }
}