/* Слайдер видео — 522:8692: фон #f7f7f7, отступы 100/110, карточки 406×771, промежуток 25 */
.vsl {
  background: var(--paper);
  padding-block: clamp(56px, 5.2083vw, 100px);
  padding-inline: var(--gutter) 0;
}
.vsl__track {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 1.3021vw, 25px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.vsl__track::-webkit-scrollbar { display: none; }
.vsl__track::after { content: ""; flex: 0 0 var(--gutter); }

.vsl__intro {
  flex: 0 0 clamp(240px, 21.1458vw, 406px);
  /* без своей точки привязки mandatory-снап выталкивает колонку за левый край */
  scroll-snap-align: start;
}
.vsl__intro p {
  font-size: clamp(17px, 1.25vw, 24px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 1px;
  color: var(--ink);
}

.vcard {
  position: relative;
  flex: 0 0 clamp(240px, 21.1458vw, 406px);
  height: clamp(440px, 40.1563vw, 771px);
  scroll-snap-align: start;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--plate);
}
.vcard__poster { width: 100%; height: 100%; object-fit: cover; }
.vcard__video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* вуаль поверх постера — как в макете; первая карточка без фото, серой плашкой */
.vcard--poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  pointer-events: none;
}
.vcard--plate { background: var(--plate); }
.vcard--dim { background: #1a1a1a; }

.vcard__play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.vcard__play img { width: 100%; height: 100%; }
/* на светлой плашке кнопка золотая, на тёмных — приглушённая */
.vcard--plate .vcard__play { filter: none; }
.vcard--poster .vcard__play, .vcard--dim .vcard__play { opacity: 0.6; filter: grayscale(1); }
.vcard__play:hover { transform: translate(-50%, -50%) scale(1.08); }

@media (max-width: 599px) { .vsl { padding-block: 56px; } }