%mr-inline-auto {
  margin-inline: auto;
}

%style-category-item {
  font-size: $fs-md;
  padding: 8px 18px;
  border-radius: 50px;
}

.menu {
  &__container {
    @extend %mr-inline-auto;

    padding-top: 150px;
    max-width: 424px;
  }

  &__heading {
    @extend %mr-inline-auto;

    font-size: $fs-x-lg;
    font-weight: 700;
    text-align: center;
    max-width: 363px;
  }

  &__list-category {
    @extend %d-flex;
    @include flex-layout($gap: 30px);

    margin-top: 62px;
    padding-left: 50px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  &__category-item:focus {
    @extend %style-category-item;

    color: $white;
    background-color: $primary-color;
    border: 2px solid $primary-color;
  }

  &__category-item {
    @extend %style-category-item;

    color: $gray;
    background-color: transparent;
    border: 2px solid $black;
  }

  &__card-list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    column-gap: 18px;
    margin-top: 43px;
    margin-inline: 59px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }
}

@media screen and (min-width: 840px) {
  .menu {
    &__container {
      max-width: $max-width;
    }

    &__heading {
      max-width: 653px;
    }

    &__list-category {
      max-width: 1018px;
      margin-inline: 59px;
    }

    &__card-list {
      grid-auto-columns: unset;
      grid-template-rows: 1fr 1fr;
      row-gap: 66px;
    }
  }
}

@media screen and (min-width: 1200px) {
  .menu {
    &__list-category {
      max-width: 1018px;
      margin-inline: auto;
      padding-left: unset;
    }
  }
}