/* ===== VIDEO — reels carousel ===== */
.vid { --h: 607; background: #f5f5f7; }
.vid__title { position: absolute; top: 24px; left: 50%; transform: translate(-50%, -50%); width: 635px; text-align: center; font-size: 42px; line-height: 48px; font-weight: 400; color: #000; }
.vid__track { display: contents; }
.vcard { position: absolute; top: 86px; width: 302px; height: 519px; border-radius: 10px; overflow: hidden; display: block; }
.vcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vcard__grad { position: absolute; inset: auto 0 0 0; height: 176px; background: linear-gradient(to top, #0a251c 0%, rgba(10,37,28,0) 100%); }
.vcard__play { position: absolute; left: 50%; top: 324px; transform: translateX(-50%); width: 90.82px; height: 90.82px; z-index: 2; }
.vcard__cap { position: absolute; left: 15px; right: 15px; top: 460px; text-align: center; font-family: var(--font-num); font-size: 22px; line-height: 26px; color: #fff; z-index: 2; }
.vid__arrow { position: absolute; top: 304px; width: 62px; height: 62px; background: none; border: 0; padding: 0; }
.vid__arrow img { width: 100%; height: 100%; }
.vid__arrow--right { left: 1627px; }
.vid__arrow--left { left: 228px; transform: scaleX(-1); }

@media (max-width: 1024px) {
  .vid { --h: auto; height: auto; }
  .vid .stage { position: static; width: 100%; height: auto; transform: none; padding: 40px 0; }
  .vid__title { position: relative; top: 0; left: 0; transform: none; width: auto; font-size: 26px; }
  .vcard {
    position: relative; top: 0 !important; left: 0 !important; width: auto; height: auto; aspect-ratio: 302/519;
    margin: 0; scroll-snap-align: center; flex: 0 0 72%;
  }
  .vid__track {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 22px 16px 0; -webkit-overflow-scrolling: touch;
  }
  .vid__arrow { display: none; }
}