.menu--group {
  .menu {
    @include flexbox;

    @include margin($top: $lg, $left: 0, $bottom: $sm);

    li {
      @include flexbox;
      flex: 1;
      border: 1px solid $grey-light;
      border-right: none;
      justify-content: center;

      &:hover,
      &:focus {
        background: $light;
      }

      a {
        display: block;
        text-decoration: none;
        color: $med-gray;
        line-height: 1.3;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 1rem;

        &:hover,
        &:focus {
          text-decoration: underline;
        }
      }

      &:last-child {
        border-right: 1px solid $grey-light;
      }
    }
  }
}


.menu--group a[target="_blank"]:after {
  content: "\f35d";
  @include fas();
  font-size: $small-font-size;
  color: $secondary;
  padding-left: $sm;
}