@charset "UTF-8";
/* Преимущества площадки: тёмный блок 800 / 1024 / 1000 с сеткой линий white-20 (рамка сверху и снизу,
   горизонталь по центру, три вертикали — по краям с отступом 14 / 20 / 144 и по центру). Сетка — 688 / 912 / 904,
   сверху 108 / 108 / 48 (на телефоне и md сверху заходит светлая панель).
   Карточки r 16: фото cover с затемнением black-20, заголовок H2 сверху, подпись T1 снизу, поля 20 / 20 / 24.
   До xl — лента по центру сетки: 326 × 440 / 358 × 480, шаг 8, прокрутка со snap по центру — первая
   и последняя карточки встают по центру экрана.
   xl — 340 × 540 в ряд по полям (на 1280–1439 карточки уже); с JS — стопкой по центру (--stacked, первая сверху), --open раскладывает
   в ряд за 1.67 с (Smart Animate «Slow» прототипа, как Store / Bar на главной). */
.club-features {
  --club-features-card-width: 20.375rem;
  --club-features-line: var(--color-white-20);
  position: relative;
  padding-top: 6.75rem;
  padding-bottom: 0.25rem;
  overflow: hidden;
  color: var(--color-white);
  background-color: var(--color-black);
}
@media (min-width: 768px) {
  .club-features {
    --club-features-card-width: 22.375rem;
  }
}
@media (min-width: 1280px) {
  .club-features {
    --club-features-card-width: min(21.25rem, (100vw - 5rem) / 4);
    padding-block: 3rem;
  }
}
.club-features__heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.club-features__stage {
  --club-features-x: 0.875rem;
  display: flex;
  align-items: center;
  height: 43rem;
  border-block: 1px solid var(--club-features-line);
  background: linear-gradient(var(--club-features-line), var(--club-features-line)) left var(--club-features-x) top 0/1px 100% no-repeat, linear-gradient(var(--club-features-line), var(--club-features-line)) 50% 0/1px 100% no-repeat, linear-gradient(var(--club-features-line), var(--club-features-line)) right var(--club-features-x) top 0/1px 100% no-repeat, linear-gradient(var(--club-features-line), var(--club-features-line)) 0 50%/100% 1px no-repeat;
}
@media (min-width: 768px) {
  .club-features__stage {
    --club-features-x: 1.25rem;
    height: 57rem;
  }
}
@media (min-width: 1280px) {
  .club-features__stage {
    --club-features-x: 9rem;
    height: 56.5rem;
  }
}
.club-features__list {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  padding: 0 calc((100% - var(--club-features-card-width)) / 2);
  margin: 0;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.club-features__list::-webkit-scrollbar {
  display: none;
}
@media (min-width: 1280px) {
  .club-features__list {
    justify-content: center;
    padding: 0;
    overflow: visible;
  }
}
.club-features__list:focus-visible {
  outline-color: var(--color-green);
}
.club-features__item {
  position: relative;
  display: flex;
  flex: 0 0 var(--club-features-card-width);
  flex-direction: column;
  justify-content: space-between;
  height: 27.5rem;
  padding: 1.25rem;
  overflow: hidden;
  background-color: var(--color-black-pale);
  border-radius: var(--radius-16);
  isolation: isolate;
  scroll-snap-align: center;
}
@media (min-width: 768px) {
  .club-features__item {
    height: 30rem;
  }
}
@media (min-width: 1280px) {
  .club-features__item {
    height: 33.75rem;
    padding: 1.5rem;
  }
}
.club-features__item::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background-color: var(--color-black-20);
}
.club-features__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.club-features__title {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 3rem;
  line-height: 0.96;
}
@media (min-width: 768px) {
  .club-features__title {
    font-size: 3.5rem;
    line-height: 0.92;
  }
}
@media (min-width: 1280px) {
  .club-features__title {
    font-size: 4rem;
    line-height: 0.94;
  }
}
.club-features__text {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.24;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
@media (min-width: 1280px) {
  .club-features__text {
    font-size: 1.125rem;
  }
}
@media (min-width: 1280px) {
  .club-features--stacked .club-features__item {
    z-index: calc(var(--count) - var(--i));
    transform: translateX(calc(((var(--count) - 1) / 2 - var(--i)) * (var(--club-features-card-width) + 0.5rem)));
  }
}
@media (min-width: 1280px) {
  .club-features--animated .club-features__item {
    transition: transform 1.67s cubic-bezier(0.22, 1, 0.36, 1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .club-features--animated .club-features__item {
    transition: none;
  }
}
@media (min-width: 1280px) {
  .club-features--open .club-features__item {
    transform: none;
  }
}