/* =========================================================
   VIDEO STORIES — listing + details pages
   ========================================================= */

/* ---------- Hero (text only, dark, full-bleed banner) ---------- */
.vs-hero{
  position:relative; overflow:hidden; background:var(--black);
  padding-top:calc(var(--nav-dip-depth, 112px) + 2.6rem); padding-bottom:2.8rem;
}
.vs-hero .vs-hero-bg{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; }
.vs-hero .vs-hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(11,10,8,.62) 0%, rgba(11,10,8,.16) 22%, rgba(11,10,8,.52) 48%, rgba(11,10,8,.86) 78%, rgba(11,10,8,.97) 100%);
}
.vs-hero .container{ position:relative; z-index:2; }
.vs-hero .vs-hero-eyebrow{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-body); font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.7rem;
}
.vs-hero .vs-hero-title{ font-family:var(--font-display); font-size:clamp(2.4rem, 5vw, 3.8rem); color:var(--white); margin-bottom:.6rem; line-height:1.05; }
.vs-hero .vs-hero-copy{ font-family:var(--font-body); font-size:1rem; color:rgba(246,241,231,.72); margin-bottom:0; max-width:440px; }

/* ---------- Featured Videos — a separate section below the banner,
   showing two self-contained cards side by side ---------- */
.vs-featured-section{
  position:relative; overflow:hidden; padding:2.4rem 0;
  background:linear-gradient(135deg, #f8ecc9 0%, #f3d9a0 50%, #f9efd2 100%);
}
.vs-featured-section::before,
.vs-featured-section::after{
  content:''; position:absolute; width:260px; height:260px; pointer-events:none; opacity:.5;
  background:radial-gradient(circle, rgba(212,175,55,.25) 0%, transparent 70%);
}
.vs-featured-section::before{ top:-80px; left:-80px; }
.vs-featured-section::after{ bottom:-80px; right:-80px; }
.vs-featured-viewport{ position:relative; z-index:1; overflow-x:hidden; scroll-behavior:smooth; cursor:grab; user-select:none; }
.vs-featured-viewport.is-dragging{ cursor:grabbing; scroll-behavior:auto; }
.vs-featured-viewport.is-dragging .vs-hero-card{ pointer-events:none; }
.vs-featured-grid{ display:flex; gap:1.6rem; }
.vs-featured-grid .vs-hero-card{ flex:0 0 calc(50% - .8rem); }

.vs-hero-card{
  position:relative; border-radius:20px; overflow:hidden; min-height:320px;
  box-shadow:0 22px 50px rgba(120,90,30,.22);
}
.vs-hero-card .vs-hero-bg{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; }
.vs-hero-card .vs-hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(11,10,8,.85) 0%, rgba(11,10,8,.55) 45%, rgba(11,10,8,.1) 78%, rgba(11,10,8,.35) 100%);
}
.vs-hero-inner{
  position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  height:100%; min-height:320px; padding:1.8rem 1.8rem;
}
.vs-hero-text{ max-width:300px; }
.vs-hero-card .vs-hero-eyebrow{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-body); font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.5rem;
}
.vs-hero-card .vs-hero-title{ font-family:var(--font-display); font-style:italic; font-size:clamp(1.6rem, 2.6vw, 2.2rem); color:var(--white); margin-bottom:.4rem; line-height:1.05; }
.vs-hero-card .vs-hero-copy{ font-family:var(--font-body); font-size:.82rem; color:rgba(246,241,231,.78); margin-bottom:1.1rem; }

.vs-hero-thumbs{ display:flex; flex-direction:column; gap:.5rem; width:72px; flex-shrink:0; }
.vs-hero-thumb{
  position:relative; display:block; height:50px; border-radius:8px; overflow:hidden;
  border:2px solid rgba(255,255,255,.8); box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.vs-hero-thumb img{ width:100%; height:100%; object-fit:cover; }
.vs-hero-thumb-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(11,10,8,.28); color:var(--white); font-size:.65rem;
}
.vs-hero-thumb-duration{
  position:absolute; right:.25rem; bottom:.2rem; z-index:2;
  padding:.03rem .3rem; border-radius:4px; background:rgba(11,10,8,.75);
  color:var(--white); font-family:var(--font-body); font-size:.55rem; font-weight:700;
}

.vs-hero-text .wep-btn{
  border-radius:999px; gap:.6rem;
  background:rgba(212,175,55,.28); border-color:rgba(212,175,55,.6);
  backdrop-filter:blur(10px) saturate(160%); -webkit-backdrop-filter:blur(10px) saturate(160%);
  color:var(--white);
}
.vs-hero-text .wep-btn:hover{ color:var(--white); border-color:var(--gold); box-shadow:0 10px 28px rgba(212,175,55,.3); }
.vs-hero-text .wep-btn::before{ background:rgba(212,175,55,.9); }
.vs-hero-text .wep-btn:hover::before{ background:rgba(212,175,55,.95); }

/* ---------- Filter toolbar ---------- */
.vs-filter-section{ padding:1.6rem 0; background:var(--white); border-bottom:1px solid rgba(11,10,8,.08); }
.vs-filter-toolbar{ display:flex; align-items:center; gap:.9rem; }
.vs-filter-scroll{ flex:1; overflow-x:auto; scrollbar-width:none; cursor:grab; user-select:none; }
.vs-filter-scroll::-webkit-scrollbar{ display:none; }
.vs-filter-scroll.is-dragging{ cursor:grabbing; }
.vs-filter-scroll.is-dragging .vs-filter-chip{ pointer-events:none; }
.vs-filter-row{ display:flex; gap:.6rem; min-width:max-content; }
.vs-filter-chip{
  flex:0 0 auto; padding:.55rem 1.1rem; border-radius:999px; border:1px solid rgba(11,10,8,.12);
  background:var(--white); font-family:var(--font-body); font-size:.8rem; font-weight:600; color:#3b382f;
  cursor:pointer; white-space:nowrap; transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.vs-filter-chip:hover{ border-color:var(--gold); }
.vs-filter-chip.is-active{ background:#1f3d2e; border-color:#1f3d2e; color:var(--white); }
.vs-view-toggle{ display:flex; gap:.3rem; flex-shrink:0; }
.vs-view-btn{
  width:38px; height:38px; border-radius:9px; border:1px solid rgba(11,10,8,.12); background:var(--white);
  color:#8a8471; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:.9rem;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.vs-view-btn.is-active{ background:var(--black); color:var(--gold); border-color:var(--black); }

/* ---------- Section heading + sort ---------- */
.vs-listing-section{ padding:2.6rem 0 4.5rem; background:var(--white); }
.vs-listing-head{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-bottom:1.8rem; }
.vs-listing-title{ font-family:var(--font-display); font-size:1.7rem; color:var(--black); margin-bottom:.3rem; }
.vs-listing-sub{ font-family:var(--font-body); font-size:.88rem; color:#8a8471; }
.vs-sort-wrap{ position:relative; }
.vs-sort-trigger{
  display:flex; align-items:center; gap:.6rem; padding:.6rem 1rem; border-radius:9px;
  border:1px solid rgba(11,10,8,.15); background:var(--white); cursor:pointer;
  font-family:var(--font-body); font-size:.82rem; color:var(--black);
}
.vs-sort-trigger span{ font-weight:700; }
.vs-sort-trigger i{ color:#8a8471; font-size:.7rem; transition:transform .2s ease; }
.vs-sort-wrap:hover .vs-sort-trigger i, .vs-sort-wrap.is-open .vs-sort-trigger i{ transform:rotate(180deg); }
.vs-sort-menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:20; min-width:170px;
  background:var(--white); border-radius:12px; border:1px solid rgba(212,175,55,.2);
  box-shadow:0 20px 44px rgba(11,10,8,.18); padding:.4rem;
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.vs-sort-wrap:hover .vs-sort-menu, .vs-sort-wrap.is-open .vs-sort-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.vs-sort-item{
  display:block; width:100%; padding:.55rem .7rem; border:none; border-radius:8px; background:transparent;
  font-family:var(--font-body); font-size:.82rem; font-weight:600; color:#3b382f; text-align:left; cursor:pointer;
}
.vs-sort-item:hover{ background:rgba(212,175,55,.1); }
.vs-sort-item.is-selected{ background:rgba(212,175,55,.14); color:var(--black); }

/* ---------- Video grid + card (full-bleed cinematic style) ---------- */
@property --vs-angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes vsAngleSpin{ to{ --vs-angle:360deg; } }

.vs-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1.4rem; }
.vs-card{
  position:relative; display:block; height:300px; border-radius:16px; overflow:hidden;
  text-decoration:none; box-shadow:rgba(0, 0, 0, 0.24) 0px 3px 8px;
  transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
}
.vs-card:hover{ transform:translateY(-6px); box-shadow:0 24px 48px rgba(11,10,8,.3); }
.vs-card.is-hidden{ display:none; }
.vs-card.is-page-hidden{ display:none; }

.vs-card-thumb{ position:absolute; inset:0; height:100%; }
.vs-card-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.22,1,.36,1); }
.vs-card:hover .vs-card-thumb img{ transform:scale(1.08); }

/* Full-height gradient scrim so title/stats sit directly on the image */
.vs-card::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(11,10,8,.05) 0%, transparent 30%, rgba(11,10,8,.6) 62%, rgba(11,10,8,.96) 100%);
}
/* Animated gold ring on hover — same masked conic-gradient technique used sitewide */
.vs-card::before{
  content:''; position:absolute; inset:0; z-index:3; border-radius:inherit; padding:2px;
  background:conic-gradient(from var(--vs-angle),
    transparent 0%, var(--gold) 12%, rgba(212,175,55,.15) 28%, transparent 45%,
    transparent 55%, rgba(212,175,55,.15) 72%, var(--gold) 88%, transparent 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.vs-card:hover::before{ opacity:1; animation:vsAngleSpin 4s linear infinite; }

.vs-card-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:2;
  width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.16);
  border:1.5px solid rgba(255,255,255,.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; color:var(--white); font-size:1rem;
  transition:transform .3s ease, background .3s ease, border-color .3s ease;
}
.vs-card:hover .vs-card-play{ transform:translate(-50%, -50%) scale(1.12); background:var(--gold); border-color:var(--gold); color:var(--black); }
.vs-card-duration{
  position:absolute; right:.7rem; top:.7rem; z-index:2; padding:.2rem .55rem; border-radius:6px;
  background:rgba(11,10,8,.55); backdrop-filter:blur(3px); color:var(--white); font-family:var(--font-body); font-size:.7rem; font-weight:700;
}
.vs-card-category{
  position:absolute; left:.7rem; top:.7rem; z-index:2; padding:.25rem .65rem; border-radius:999px;
  background:var(--gold); color:var(--black); font-family:var(--font-body); font-size:.6rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
}
.vs-card-body{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1rem 1.1rem;
}
.vs-card-title{ font-family:var(--font-display); font-size:1.15rem; color:var(--white); margin-bottom:.2rem; line-height:1.2; }
.vs-card-desc{ font-family:var(--font-body); font-size:.76rem; color:rgba(246,241,231,.68); margin-bottom:.6rem; }
.vs-card-stats{ display:flex; gap:0; }
.vs-card-stat{
  flex:1; position:relative; justify-content:center;
  display:flex; align-items:center; gap:.3rem; padding:0;
  font-family:var(--font-body); font-size:.68rem; color:rgba(246,241,231,.85);
}
.vs-card-stat:not(:last-child)::after{
  content:''; position:absolute; right:0; top:50%; transform:translateY(-50%);
  height:60%; width:1px; background:rgba(255,255,255,.25);
}
.vs-card-stat i{ color:var(--gold); font-size:.68rem; }

/* ---------- List view — a clean horizontal row layout ---------- */
.vs-grid.is-list{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1rem; }
.vs-grid.is-list .vs-card{
  height:auto; display:flex; align-items:stretch; border-radius:14px;
}
/* Must win over ".vs-grid.is-list .vs-card" (higher specificity than
   ".vs-card.is-hidden" alone) — without this, filtered-out cards were
   still showing display:flex in list view regardless of the active filter. */
.vs-grid.is-list .vs-card.is-hidden{ display:none; }
.vs-grid.is-list .vs-card.is-page-hidden{ display:none; }
.vs-grid.is-list .vs-card:hover{ transform:translateY(-4px); }
.vs-grid.is-list .vs-card-thumb{ position:relative; inset:auto; flex:0 0 45%; height:auto; }
.vs-grid.is-list .vs-card::after{ display:none; }
.vs-grid.is-list .vs-card-category{ top:.6rem; left:.6rem; }
.vs-grid.is-list .vs-card-duration{ top:.6rem; right:.6rem; }
.vs-grid.is-list .vs-card-play{ width:44px; height:44px; font-size:.85rem; }
.vs-grid.is-list .vs-card-body{
  position:relative; inset:auto; flex:1; z-index:auto;
  background:var(--ivory); padding:1.1rem 1.4rem;
  display:flex; flex-direction:column; justify-content:center;
}
.vs-grid.is-list .vs-card-title{ color:var(--black); font-size:1.25rem; margin-bottom:.35rem; }
.vs-grid.is-list .vs-card-desc{ color:#7a7568; font-size:.85rem; margin-bottom:.8rem; }
/* Stats as an equal-width footer bar with separators between each stat */
.vs-grid.is-list .vs-card-stats{
  display:flex; margin-top:auto; padding-top:.8rem; border-top:1px solid rgba(11,10,8,.1);
}
.vs-grid.is-list .vs-card-stat{
  flex:1; position:relative; justify-content:center;
  background:transparent; padding:0; color:#8a8471; font-size:.75rem;
}
.vs-grid.is-list .vs-card-stat:not(:last-child)::after{
  content:''; position:absolute; right:0; top:50%; transform:translateY(-50%);
  height:60%; width:1px; background:rgba(11,10,8,.15);
}

.vs-empty-state{
  display:none; text-align:center; padding:3rem 1rem; color:#8a8471;
  font-family:var(--font-body); font-size:.95rem;
}
.vs-empty-state.is-visible{ display:block; }
.vs-empty-state i{ font-size:1.8rem; color:var(--gold); display:block; margin-bottom:.7rem; }

/* ---------- Article body: full width on this page (not the 640px
   readability cap used elsewhere) ---------- */
.occ-main .occ-article-body{ max-width:none; }

/* ---------- Sidebar: Package Builder promo ad ---------- */
.vs-package-ad{
  position:relative; overflow:hidden; border-radius:14px; padding:1.4rem 1.3rem;
  background:linear-gradient(145deg, #1a1a1a 0%, #2c2213 60%, #3d2f14 100%);
  box-shadow:rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.vs-package-ad::before{
  content:''; position:absolute; top:-40px; right:-40px; width:140px; height:140px; border-radius:50%;
  background:radial-gradient(circle, rgba(212,175,55,.35) 0%, transparent 70%);
}
.vs-package-ad-icon{
  position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px; margin-bottom:.9rem;
  background:rgba(212,175,55,.18); color:var(--gold); font-size:1.15rem;
}
.vs-package-ad h5{ position:relative; z-index:1; font-family:var(--font-display); font-size:1.1rem; color:var(--white); margin-bottom:.5rem; }
.vs-package-ad p{ position:relative; z-index:1; font-family:var(--font-body); font-size:.82rem; line-height:1.55; color:rgba(246,241,231,.7); margin-bottom:1.1rem; }
.vs-package-ad .wep-btn{
  position:relative; z-index:1; padding:.8rem 1rem; font-size:.7rem; letter-spacing:.03em;
  white-space:normal; text-align:center; line-height:1.3; gap:.4rem;
}

/* ---------- Thumbnail strip overlapping the player's bottom edge ---------- */
.vs-thumb-overlay{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.1rem 1.2rem .9rem;
  background:linear-gradient(0deg, rgba(11,10,8,.92) 12%, rgba(11,10,8,.55) 55%, transparent 100%);
}
.vs-thumb-overlay-label{
  display:block; font-family:var(--font-body); font-size:.72rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--white); margin-bottom:.6rem;
}
.vs-thumb-slider-viewport{ overflow-x:hidden; scroll-behavior:smooth; cursor:grab; user-select:none; }
.vs-thumb-slider-viewport.is-dragging{ cursor:grabbing; scroll-behavior:auto; }
.vs-thumb-slider-viewport.is-dragging .vs-thumb-slide{ pointer-events:none; }
.vs-thumb-slider-track{ display:flex; gap:.7rem; }
.vs-thumb-slide{
  position:relative; flex:0 0 130px; display:block; height:76px; border-radius:9px; overflow:hidden;
  border:2px solid transparent; padding:0; background:none; cursor:pointer; -webkit-appearance:none;
  box-shadow:rgba(0, 0, 0, 0.24) 0px 3px 8px; transition:border-color .25s ease, transform .25s ease;
}
.vs-thumb-slide:hover{ transform:translateY(-2px); }
.vs-thumb-slide.is-active{ border-color:var(--gold); }
.vs-thumb-slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.vs-thumb-slide:hover img{ transform:scale(1.06); }
.vs-thumb-slide::after{
  content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(11,10,8,.8) 15%, transparent 65%);
}
.vs-thumb-slide-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:1;
  width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.9);
  display:flex; align-items:center; justify-content:center; color:var(--black); font-size:.6rem;
}
.vs-thumb-slide.is-active .vs-thumb-slide-play{ background:var(--gold); color:var(--white); }
.vs-thumb-slide-duration{
  position:absolute; right:.35rem; top:.35rem; z-index:1; padding:.1rem .35rem; border-radius:4px;
  background:rgba(11,10,8,.7); color:var(--white); font-family:var(--font-body); font-size:.56rem; font-weight:700;
}
.vs-thumb-slide-title{
  position:absolute; left:.5rem; right:.5rem; bottom:.4rem; z-index:1;
  font-family:var(--font-body); font-size:.62rem; font-weight:700; color:var(--white);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* =========================================================
   SINGLE STORY (details) PAGE
   ========================================================= */
.vs-player-wrap{
  position:relative; width:100%; aspect-ratio:16/9; border-radius:14px; overflow:hidden;
  background:var(--black); box-shadow:rgba(0, 0, 0, 0.24) 0px 3px 8px; margin-bottom:1.6rem;
  cursor:grab; touch-action:pan-y;
}
.vs-player-wrap.is-dragging{ cursor:grabbing; }
.vs-player-track{ position:absolute; inset:0; display:flex; width:100%; height:100%; will-change:transform; }
.vs-player-slide{ position:relative; flex:0 0 100%; height:100%; }
.vs-player-slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; user-select:none; -webkit-user-drag:none; }
.vs-player-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:1; pointer-events:none;
  width:78px; height:78px; border-radius:50%; background:rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center; color:var(--black); font-size:1.5rem;
  box-shadow:0 16px 36px rgba(0,0,0,.35); transition:transform .3s ease, background .3s ease;
}
.vs-player-wrap:hover .vs-player-play{ transform:translate(-50%, -50%) scale(1.08); background:var(--gold); color:var(--white); }

.vs-story-stats{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.vs-story-stat{ display:flex; align-items:center; gap:.5rem; font-family:var(--font-body); font-size:.85rem; color:#5c5548; }
.vs-story-stat i{ color:var(--gold); font-size:1rem; }
.vs-story-stat strong{ font-family:var(--font-display); font-size:1.1rem; color:var(--black); }

@media (max-width:991px){
  .vs-featured-grid .vs-hero-card{ flex:0 0 100%; }
  .vs-hero-inner{ flex-direction:column; align-items:flex-start; padding:1.8rem 1.6rem; }
  .vs-hero-thumbs{ flex-direction:row; width:100%; }
  .vs-hero-thumb{ flex:1; height:56px; }
  .vs-grid{ grid-template-columns:repeat(2, 1fr); }
  .vs-grid.is-list{ grid-template-columns:1fr; }
  .vs-grid.is-list .vs-card{ flex-direction:column; }
  .vs-grid.is-list .vs-card-thumb{ flex:0 0 220px; }
  .vs-thumb-overlay{ padding:.9rem 1rem .75rem; }
  .vs-thumb-overlay-label{ font-size:.66rem; margin-bottom:.5rem; }
  .vs-thumb-slide{ flex:0 0 108px; height:64px; border-radius:8px; }
  .vs-thumb-slide-title{ font-size:.56rem; }
  .vs-player-play{ width:62px; height:62px; font-size:1.25rem; top:40%; }
}

@media (max-width:575px){
  .vs-hero{ padding-top:calc(var(--nav-dip-depth, 70px) + 1.6rem); padding-bottom:2rem; }
  .vs-hero-card{ border-radius:16px; min-height:auto; }
  .vs-hero-inner{ min-height:auto; padding:1.6rem 1.2rem; }
  .vs-hero-thumb{ height:44px; }
  .vs-grid{ grid-template-columns:1fr; }
  .vs-listing-head{ flex-direction:column; align-items:flex-start; }
  .vs-card{ height:300px; }
  .vs-thumb-overlay{ padding:.7rem .8rem .6rem; }
  .vs-thumb-overlay-label{ font-size:.6rem; margin-bottom:.4rem; }
  .vs-thumb-slider-track{ gap:.5rem; }
  .vs-thumb-slide{ flex:0 0 82px; height:50px; border-radius:7px; }
  .vs-thumb-slide-play{ width:20px; height:20px; font-size:.5rem; }
  .vs-thumb-slide-duration{ font-size:.5rem; padding:.06rem .28rem; right:.25rem; top:.25rem; }
  .vs-thumb-slide-title{ display:none; }
  .vs-player-play{ width:48px; height:48px; font-size:1rem; top:36%; }
}

@media (prefers-reduced-motion: reduce){
  .vs-card, .vs-card-thumb img, .vs-card-play, .vs-player-play, .vs-card::before{ transition:none; animation:none; }
}