.c-frontpage-subjects-wrapper {
  position: relative;

  @include mq(tablet) {
    border-radius: 2px;
    background: $white;
    margin-top: -$spacing--large;
    padding: $spacing--small $spacing--large $spacing--large;
  }

  & > * {
    @include mq(tablet) {
      margin-bottom: $spacing--medium;
    }

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

.c-frontpage-subjects-section {
  transition: max-height 0.3s ease-in-out;
  padding-bottom: $spacing;

  @include mq($until: tablet) {
    max-height: 48px;
    min-height: 48px;
    background: $white;
    margin-bottom: 2px;
    padding: 0 $spacing;
    overflow: hidden;
  }

  @include mq($until: mobileWide) {
    padding: 0 20px;
  }

  &--expanded {
    @include mq($until: tablet) {
      max-height: 1000px;
    }
  }

  &__heading {
    margin: 0;
    height: 100%;
  }

  &__heading-text {
    display: none;
    @include font-size(26px, 32px);
    margin: $spacing--large 0 $spacing--small 0;

    @include mq(tablet) {
      display: block;
    }
  }

  &__expand-button {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 48px;
    @include font-size(16px, 32px);
    font-weight: $font-weight-semibold;
    @include mq(tablet) {
      display: none;
    }
  }

  &__subjects {
    margin: 0;
    padding: 0 0 $spacing 0;
    list-style: none;
    column-count: 3;

    @include mq($until: desktop) {
      column-count: 2;
    }

    @include mq($until: 800px) {
      column-count: 1;
    }

    &--narrow {
      @include mq(tablet) {
        display: none;
      }
    }

    &--wide {
      display: none;

      @include mq(tablet) {
        display: block;
      }
    }
  }

  &__item {
    margin: $spacing--small / 2 0;
    display: inline-flex;
    width: 100%;
    > * {
      padding: $spacing--small / 2 0;
      display: inline-flex;
    }

    @include mq($until: tablet) {
      > a {
        padding-top: $spacing--small;
        padding-bottom: $spacing--small;
        display: flex;
      }
      margin-bottom: 0;
      justify-content: space-between;
    }

    &:last-child {
      @include mq($until: tablet) {
        margin-bottom: 0;
      }
    }
  }

  &__link {
    box-shadow: none;
    color: $brand-color;
    display: flex;
    align-items: center;

    &:hover,
    &:active,
    &:focus {
      .c-frontpage-subjects-section__text {
        box-shadow: $link--hover;
      }
    }
  }

  &__text {
    box-shadow: $link;
    font-weight: $font-weight-semibold;

    @include font-size(16px, 18px);

    @include mq(tablet) {
      @include font-size(18px, 22px);
    }

    @include mq($from: desktop, $until: 1165px) {
      @include font-size(16px, 18px);
    }
  }

  &__year-info {
    padding-left: $spacing--small;
    @include font-size(12px, 16px);

    @include mq(tablet) {
      @include font-size(14px, 18px);
    }
  }
  &__beta-label-container {
    margin-left: $spacing--small;
  }
  &__beta-label {
    padding: $spacing--small / 2;
    line-height: 1em;
  }
}

.c-modal__animation-container--gray-dark {
  .c-topic-menu {
    &__content {
      background: $brand-grey--lighter;
    }
  }
}

.c-topic-menu {
  &__content {
    @include mq($until: tablet) {
      .c-frontpage-subjects-wrapper {
        margin-top: 0;
      }
      .c-frontpage-subjects-section {
        background: #fff;
        padding: 0;
        margin-bottom: 1px;
        max-height: 52px;
        min-height: 52px;
        &--expanded {
          max-height: 1400px;
        }
        &__expand-button {
          padding: 0 $spacing;
          color: $brand-color;
          @include font-size(17px, 20px);
          height: 52px;
        }
        .c-frontpage-subjects-section__subjects--narrow {
          padding: 0;
          li {
            margin: 1px 0 0 0;
            padding: 0 $spacing;
            background: $brand-color--lighter;
            height: 52px;
            display: flex;
            align-items: center;
            @include font-size(17px, 20px);
            .c-frontpage-subjects-section__text {
              box-shadow: none;
            }
          }
        }
      }
      .c-topic-menu__content-type-results {
        a {
          box-shadow: none;
        }
        @include font-size(17px, 20px);
      }
    }
  }
}