.section-nav {
  $block: unquote("#{&}");
  @include pages();
  @media screen and (min-width: 64.000em) {
    overflow-y: scroll;
  }
  &__label {
    color: #000;
    padding: 1em 0;
    font-size: $font-medium;
    @media screen and (min-width: 20.000em) {
      display: inline-block;
    }
    @include for-size(tablet-landscape-up) {
      display: block;
    }
  }
  &-list {
    margin: 0;
    padding: 0;
    @media screen and (min-width: 27.813em) {

    }
    @media screen and (min-width: 62.000em) {
      display: flex;
      justify-content: center;
      text-align: center;
    }
    &__item {
      display: block;
      margin: 1em 0.5em;
      text-align: center;
      @media screen and (min-width: 20.000em) {
        text-align: initial;
      }
      @media screen and (min-width: 25.000em) {
        width: 320px;
      }
      @media screen and (min-width: 27.813em) {
        display: inline-block;
        margin: 0.5em 1.5em 0;
      }
      @media screen and (min-width: 72.188em) {
        text-align: center;
        width: 360px;
      }
    }
    &__anchor {
      display: block;
      @media screen and (min-width: 27.813em) {
        text-align: center;
        display: inline-block;
      }
      &:active, &:hover, &:focus {
        #{$block}__label {
          color: $color-blue;
          transition: color 100ms ease-in-out;
        }
      }
    }
    &__images {
      background-color: $color-light-gray;
      display: inline-block;
      vertical-align: middle;
      margin: 0 0.5em 0 0;
      height: 70px;
      width: 100px;
      overflow: hidden;
      @media screen and (min-width: 27.813em) {
        margin: 0;
        display: block;
        height: 190px;
        width: 320px;
      }
      @media screen and (min-width: 72.188em) {
        height: 240px;
        width: 360px;
      }
      &--music, &--radio-drama, &--radio-talk, &--radio-talk-show  {
        background: url("/static/img/patterns/yegna/subsections-bg.svg") no-repeat 0 0/ 100%;
      }
      &--music {
        background-position: center 50%;
      }
      &--radio-talk, &--radio-talk-show {
        background-position: center 100%;
      }
    }
  }
  &--related {
    padding: 0 0 2em;
    #{$block}-list {
      &__images {
        &--music, &--radio-drama, &--radio-talk, &--radio-talk-show  {
          background: url("/static/img/patterns/yegna/subsections-bg2.svg") no-repeat 0 0/ 100%;
        }
        &--music {
          background-position: center 50%;
        }
        &--radio-talk, &--radio-talk-show {
          background-position: center 100%;
        }
      }
    }
  }
}
