/* =========================
   Group Slider (isolated)
   Не влияет на секции вне .group-slider
========================= */

.group-slider {
  display: grid;
  gap: var(--s-6);
  position: relative;
}

/* окно */
.group-slider__viewport {
  overflow: hidden; /* прячет соседние слайды */
  border-radius: var(--r-4);
}

/* лента */
.group-slider__track {
  display: flex;
  width: 100%;
  transform: translateX(0);
  transition: transform 260ms ease;
  will-change: transform;
}

/* один слайд = ровно ширина viewport */
.group-slider__item {
  flex: 0 0 100%;
  min-width: 0;
}

/* чтобы ваши секции внутри не "прилипали" к краям viewport */
.group-slider__item > .section {
  padding-block: 0; /* опционально: если не хотите удваивать отступы */
}

/* pager */
.group-slider__footer {
  position: absolute;
  z-index: 99;
  right: 0;
  top: 10%;
}

.group-slider__pager {
  display: inline-flex;
  gap: 8px;
  padding: 8px 10px;
  /* border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(8px); */
  flex-direction: column;
}

.group-slider__dot {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--txt);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0.85;
}

.group-slider__dot:hover {
  opacity: 1;
  background: var(--surface);
}

.group-slider__dot.is-active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  opacity: 1;
}
/* Отступ между двумя соседними group-slider */
.group-slider + .group-slider {
  margin-top: var(--section-py);
}
@media (max-width: 640px) {
  .group-slider + .group-slider {
    margin-top: var(--s-12);
  }
}