.groups-and-headings {
  $spacing: rem-calc(4);

  .headings-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin-left: -$spacing;
  }

  .heading {
    border: 1px solid $border;
    border-radius: rem-calc(3);
    margin-bottom: $line-height / 2;
    margin-left: $spacing;
    padding: $line-height / 2;
    position: relative;
    width: 100%;

    @include breakpoint(medium) {
      width: calc(100% / 3 - #{$spacing});
    }

    @include breakpoint(large) {
      width: calc(100% / 6 - #{$spacing});
    }

    &:focus-within {
      outline: $outline-focus;

      a:focus {
        outline: none;
      }
    }

    a {

      &::after,
      &::before {
        bottom: 0;
        content: "";
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
      }

      &:hover {
        text-decoration: none;
      }

      &:hover::before {
        background: $highlight;
        z-index: -1;
      }
    }

    span {
      display: block;
      font-size: $small-font-size;
    }
  }
}

.groups-and-headings {
  $spacing: $line-height / 2;

  .headings-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin-left: -$spacing;
  }

  .heading {
    border: 2px solid $border;
    border-radius: rem-calc(6);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: $line-height / 2;
    margin-left: $spacing;
    margin-top: $line-height / 4;
    padding: $line-height / 2;
    position: relative;
    width: 100%;

    @include breakpoint(medium) {
      width: calc(100% / 3 - #{$spacing});
    }

    @include breakpoint(large) {
      width: calc(100% / 6 - #{$spacing});
    }

    &:focus-within {
      outline: $outline-focus;

      a:focus {
        outline: none;
      }
    }

    a {
      font-weight: bold;

      &::after,
      &::before {
        bottom: 0;
        content: "";
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
      }

      &:hover {
        text-decoration: none;
      }

      &:hover::before {
        background: $highlight;
        z-index: -1;
      }
    }

    span {
      display: block;
      font-size: $small-font-size;
      padding-top: $line-height / 2;
    }
  }
}

Adjust groups and headings styles
Adjust groups and headings styles
