/**
 * @file
 * Button List
 *
 * Styles for Button List object.
 */

@use '_helper' as *;

.button-list {
  &__subtitle {
    margin-bottom: 20px;

    @media screen and (min-width: $break-large) {
      margin-bottom: 30px;
    }

    h2,
    h3 {
      @include h5;
      text-transform: none;
      margin: 0;
      color: $color-black;
    }
  }

  &__items {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;

    @media screen and (min-width: $break-medium) {
      gap: 16px;
    }

    @media screen and (min-width: $break-large) {
      gap: 20px;
    }

    li {
      margin: 0;

      &::before {
        content: none;
      }
    }
  }
}