index.scss

@import '../../assets/scss/variables.scss';
@import '../../assets/scss/animations.scss';
@import '../../assets/scss/mixins.scss';

@include opacitygrowAnimation;

.content.watch {
  min-height: calc(100vh - var(--header-height-md) - #{$footerHeight});
  @include mobile() {
    padding-top: 110px;
  }
  .title {
    color: var(--h3-color);
    padding: 12px;
    text-align: center;
    @include desktop() {
      font-size: var(--h3-md);
    }
    @include tablet() {
      font-size: var(--h3-sm);
    }
    @include mobile() {
      font-size: var(--h3-xs);
    }
  }
  .navigation {
    display: flex;
    justify-content: center;
  }
  .title,
  .navigation {
    @include opacitySetting();
  }
  .recommendations {
    margin-top: 36px;
    .title {
      color: var(--h2-color);
      margin: 12px 0 0;
      @include desktop() {
        font-size: var(--h2-md);
      }
      @include tablet() {
        font-size: var(--h2-sm);
      }
      @include mobile() {
        font-size: var(--h2-xs);
      }
    }
    .related-videos {
      @include opacitySetting(1s, 0s);
    }
    .more-videos {
      @include opacitySetting();
    }
  }
}