.articles-sections {
   display: flex;
   align-items: flex-start;
   min-height: 35px;

   > div {
      display: flex;
      flex-wrap: wrap;
   }

   p {
      margin: 0 15px 0 0;
      color: $text-muted;
   }

   a {
      @include underline-never;

      text-transform: uppercase;
      letter-spacing: $letter-spacing-lg;
      color: $text-dark;
      margin: 0 15px;
      position: relative;

      &::after {
         content: '';
         display: block;
         position: absolute;
         width: 100%;
         bottom: -5px;
         border-top: 2px solid $black;
         opacity: 0;
         transition: opacity $transition-speed;
      }

      @include haf {
         &::after {
            opacity: 1;
         }
      }

      &.active {
         pointer-events: none;
         font-weight: $font-weight-bold;

         &::after {
            opacity: 1;
         }
      }
   }

   @media screen and (max-width: $md - 1) {
      flex-wrap: wrap;

      p {
         flex: 100%;
         line-height: $line-height-base;
      }

      a {
         margin: 0 10px 10px 0;
      }
   }
}
