/* =========================================================
   Sai Mai — Ostrava homepage
   Implementation of Ostrava-Homepage.dc.html (Claude Design).
   Requires css/base.css and css/branch.css.
   ========================================================= */

/* =========================================================
   Header
   ========================================================= */

/* =========================================================
   Hero — photograph, plus the shared craft layer from base.css
   ("Hero craft layer"): a bottom-weighted gradient that guarantees
   headline contrast, and the breathing lotus ornament. There is still
   no flat scrim over the whole image — the photo stays the subject.
   ========================================================= */
.hero {
  position: relative;
  min-height: 840px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--s10) var(--edge) var(--s13);
  background: var(--hero-dark);
  overflow: hidden;
}
/* Fotka nesmí být v CSS natvrdo — tenhle soubor obsluhuje domovskou
   stránku všech poboček. Konkrétní snímek dodává --hero-img inline
   v HTML; pod ním leží --stripe, takže dokud fotka chybí, sekce má
   pořád svůj tvar a nespadne na bílou plochu. */
.hero__bg {
  position: absolute;
  inset: 0;
  background-image: var(--hero-img), var(--stripe);
  background-size: cover, auto;
  background-position: 50% 40%, 0 0;
  background-repeat: no-repeat, repeat;
}
/* Stín pod textem pro světlé fotky. Ostrava i Opava mají tmavé snímky
   a tohle nepotřebují (výchozí 0 = nic). Světlý detail masáže na
   Karviné by bez něj nechal bílé písmo na kůži — síla se proto nastaví
   inline vedle fotky: style="--hero-img:…; --hero-shade:.7". */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(31, 22, 13, var(--hero-shade, 0)) 0%,
    rgba(31, 22, 13, calc(var(--hero-shade, 0) * .7)) 45%,
    rgba(31, 22, 13, 0) 80%);
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s4);
  max-width: 864px;
}
.hero__inner > * { opacity: 0; animation: heroRise .9s var(--ease) forwards; }
.hero__title    { animation-delay: .22s; }
.hero__lede     { animation-delay: .36s; }
.hero .stats    { animation-delay: .50s; }
.hero__actions  { animation-delay: .64s; }

.hero__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 64px;
  line-height: var(--lh7);
  color: #fff;
}
.hero__lede {
  max-width: 584px;
  font-size: 16px;
  line-height: var(--lh2);
  color: #F6F3EE;
}

/* ---------------------------------------------------------
   Hero proof — jedna věta, ne palubní deska
   Velké číslo + drobný popisek v kapitálkách, čtyřikrát vedle sebe, je
   šablona z každé druhé landing page. Teď se čtyři údaje čtou jako
   jedna věta: „9 let praxe ◆ 600+ recenzí ◆ …“. Číslo zůstává v Lora
   a zlaté, popisek běžným písmem hned za ním, oddělovač je malý zlatý
   kosočtverec. HTML i count-up v main.js zůstávají beze změny.
   --------------------------------------------------------- */
.hero .stats {
  gap: var(--s1) 0;
  padding: 0;
  align-self: flex-start;
  flex-wrap: wrap;
}
.hero .stat {
  min-width: 0;
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
}
.hero .stat + .stat::before {
  content: "";
  align-self: center;
  width: 5px;
  height: 5px;
  margin: 0 var(--s2);
  background: var(--gold);
  transform: rotate(45deg);
  opacity: .8;
}
.hero .stat__value { gap: 4px; }
.hero .stat__num,
.hero .stat__num--sm {
  font-size: 24px;
  line-height: var(--lh3);
  letter-spacing: 0;
  color: var(--gold-light);
}
.hero .stat__unit,
.hero .stat__label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: var(--lh2);
  letter-spacing: 0;
  text-transform: none;
  color: #F6F3EE;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

/* =========================================================
   Proč si nás vybírají

   Druhá sekce stránky. Klidná, vzdušná, stejným jazykem jako zbytek
   webu: vlevo nadpis a čtyři důvody ve dvou sloupcích, nad každým
   tenká linka; vpravo jedna fotka se zlatým rámem, který vykukuje
   zpoza ní (týž motiv jako .split__frame u „Devět let…“).

   Jediná hra je tichá: najetí na důvod (nebo fokus, klepnutí) fotku
   prolne na tu jeho a linka nad ním zezlátne. Nic se samo nehýbe.
   Bez JS stojí první fotka a všechno je čitelné. Řídí initWhy().

   Fotky jdou inline přes --img (README), pořadí = pořadí důvodů.
   ========================================================= */
.why {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--s12);
}
.why__title { margin-bottom: var(--s8); }

.why__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s8) var(--s6);
}
.why__item {
  position: relative;
  padding-top: var(--s3);
  cursor: default;
}
/* Linka nad důvodem: šedá vždy, zlatá se přes ni natáhne u aktivního. */
.why__item::before,
.why__item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}
.why__item::after {
  top: -.5px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s var(--ease-out);
}
.why__item.is-active::after { transform: scaleX(1); }

.why__name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 24px;
  line-height: var(--lh3);
  color: var(--ink);
}
.why__text {
  margin-top: var(--s1);
  max-width: 40ch;
  font-size: 16px;
  line-height: var(--lh2);
  color: var(--body);
}

/* ---------- Fotka s rámem ---------- */
.why__media {
  position: relative;
  margin: var(--s3) var(--s3) 0 0;
}
.why__frame {
  position: absolute;
  z-index: 0;
  top: calc(-1 * var(--s3));
  right: calc(-1 * var(--s3));
  bottom: var(--s6);
  left: var(--s6);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  opacity: .6;
  pointer-events: none;
}
.why__clip {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--stripe);
}
.why__img {
  position: absolute;
  inset: 0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .9s var(--ease-out), transform 1.6s var(--ease-out);
}
.why__img.is-active { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .why__img, .why__item::after { transition: none; }
}

/* ---------- Kurzor s leknínem (initWhyCursor v main.js) ----------
   Nad celou sekcí nahradí šipku myši zlatý kroužek s leknínem — signál,
   že tu jde něco dělat. Systémový kurzor se schová jen tam, kde JS
   kroužek opravdu vytvořil (.has-cursor). */
.why.has-cursor,
.why.has-cursor * { cursor: none; }

.why-cursor {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: rgba(255, 250, 242, .55);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  color: var(--gold);
  pointer-events: none;
  opacity: 0;
  scale: .4;
  transition: opacity .25s ease, scale .45s var(--ease-out),
              background-color .35s ease, border-color .35s ease;
}
.why-cursor svg {
  width: 26px;
  height: 26px;
  rotate: -12deg;
  scale: .85;
  transition: rotate .6s var(--ease-out), scale .6s var(--ease-out);
}
.why-cursor.is-on { opacity: 1; scale: .7; }
/* Nad důvodem: kroužek povyroste, zezlátne a leknín se rozvine. */
.why-cursor.is-hot {
  scale: 1;
  background: var(--gold);
  border-color: var(--gold);
  color: var(--surface);
}
.why-cursor.is-hot svg { rotate: 0deg; scale: 1; }
@media (prefers-reduced-motion: reduce) {
  .why-cursor, .why-cursor svg { transition: opacity .2s ease; }
}

/* =========================================================
   Masáže
   ========================================================= */
.massages { display: flex; flex-direction: column; align-items: center; gap: var(--s4); }
.massages__all { align-self: center; }

/* Heading row: copy on the left, slider arrows pinned bottom-right. */
.massages__head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s5);
}
.massages__head .sec-head { max-width: 800px; }

/* ---------- Slider ---------- */
.slider { position: relative; width: 100%; }

.slider__track {
  display: flex;
  align-items: stretch;
  gap: var(--gutter);
  /* Vertical padding (cancelled by the negative margin) gives the cards'
     hover lift and shadow room inside the scroll box, which has to clip
     vertically because overflow-x is scrollable. */
  padding: var(--s3) 0;
  margin: calc(var(--s3) * -1) 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.slider__track::-webkit-scrollbar { display: none; }

/* Fixed card width means a partial card always peeks in from the right,
   which is what makes the row read as scrollable. */
.slider .mcard {
  flex: 0 0 288px;
  scroll-snap-align: start;
}

/* Edge fades — toggled by js/main.js as the track scrolls. */
.slider__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 96px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.slider__fade--left  { left: 0;  background: linear-gradient(90deg, var(--cream), rgba(243, 236, 221, 0)); }
.slider__fade--right { right: 0; background: linear-gradient(270deg, var(--cream), rgba(243, 236, 221, 0)); }
.slider.can-prev .slider__fade--left  { opacity: 1; }
.slider.can-next .slider__fade--right { opacity: 1; }

.slider__nav { display: flex; gap: var(--s2); flex: none; }
.slider__btn {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  border: 1px solid var(--line);
  color: var(--brown);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s ease, border-color .25s ease, color .25s ease, opacity .25s ease;
}
.slider__btn:hover:not(:disabled) { background: var(--brown); border-color: var(--brown); color: var(--surface); }
.slider__btn:disabled { opacity: .35; cursor: default; }

/* The site's signature arrow (--arrow, defined in base.css) drawn as a
   mask so it inherits the button's text colour — identical glyph to the
   .btn--arrow CTAs. The prev button mirrors it horizontally. */
.slider__ico {
  width: 26px;
  height: 12px;
  background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat;
          mask: var(--arrow) center / contain no-repeat;
  transition: transform .35s var(--ease);
}
.slider__btn--prev .slider__ico { transform: scaleX(-1); }
/* Subtle nudge outward on hover, matching the CTA arrow's motion. */
.slider__btn--next:hover:not(:disabled) .slider__ico { transform: translateX(3px); }
.slider__btn--prev:hover:not(:disabled) .slider__ico { transform: scaleX(-1) translateX(3px); }


.quote { display: flex; flex-direction: column; gap: var(--s1); }
.quote blockquote {
  max-width: 400px;
  font-family: var(--font-num);
  font-style: italic;
  font-size: 22px;
  line-height: var(--lh3);
  color: var(--gold);
}
.quote figcaption {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: var(--lh1);
  letter-spacing: 2.16px;
  color: #000;
}

/* =========================================================
   Dárkové poukazy
   ========================================================= */
.vouchers {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 624px;
  align-items: center;
  gap: var(--s5);
}
.vouchers__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }

/* .checks a .checks__mark žijí v branch.css — tady bývala jejich
   přesná kopie, která by po každé změně jedné z nich lhala. */
.vouchers__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }

.vouchers__note { font-family: var(--font-ui); font-size: 13px; line-height: var(--lh2); color: var(--muted); }

/* Overlapping voucher artwork — a fixed 624x480 composition of two shots. */
.vouchers__art { position: relative; width: 624px; height: 480px; }
.vshot {
  position: absolute;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-3);
}
.vshot img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* ---------- VIP: permanentka vzadu, fotka klientky přes ni ---------- */
.vshot--vip {
  left: 24px; top: 88px;
  width: 460px;
  transform: rotate(-3.5deg);
}
.vshot--vip img { height: auto; }
/* Předloha je jen 198 px široká, takže se nesmí zvětšovat — proto je fotka
   tím menším prvkem kompozice. */
.vshot--client {
  left: 396px; top: 150px;
  width: 204px; height: 274px;
  transform: rotate(3deg);
  box-shadow: var(--shadow-2);
}

/* ---------- Dárkové poukazy: karta vzadu, fotka ze studia přes ni ---------- */
.vouchers--flip { grid-template-columns: 624px minmax(0, 1fr); }
.vouchers__art--gift { justify-self: start; }
/* Diagonála: poukázka leží nízko vlevo, fotka stojí vysoko nad jejím pravým
   koncem. Dřív obě dosedaly na stejnou linku a kompozice vypadala plocho. */
.vshot--card {
  left: 0; top: 196px;
  width: 452px;
  transform: rotate(-3.5deg);
}
.vshot--card img { height: auto; }
.vshot--photo {
  left: 330px; top: 42px;
  width: 216px; height: 324px;
  transform: rotate(3deg);
  box-shadow: var(--shadow-2);
}

/* =========================================================
   Jak probíhá návštěva
   ========================================================= */
.steps { display: flex; flex-direction: column; align-items: center; gap: var(--s6); }
.steps__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: var(--gutter);
}
.step {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  height: 640px;
}
.step--imgFirst { justify-content: flex-start; }
.step--imgLast  { justify-content: flex-end; }

.step__media { height: 416px; border-radius: var(--radius-sm); overflow: hidden; }
.step__img {
  width: 100%;
  height: 100%;
  background-image: var(--img), var(--stripe);
  background-size: cover, auto;
  background-position: center, 0 0;
  background-repeat: no-repeat, repeat;
}

/* Podkladová plocha místo tmavě hnědé — ta v mřížce fotek přebíjela snímky.
   --cream-mid je o tón teplejší a tmavší než pozadí sekce, takže se karta
   čte jako klidná plocha, ne jako druhá vrstva nad stránkou. */
.step__card {
  height: 208px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--cream-mid);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s1);
  padding: var(--s3);
}
.step__num { font-family: var(--font-num); font-size: 40px; line-height: var(--lh5); color: var(--gold); }
.step__title { font-family: var(--font-note); font-weight: 400; font-size: 22px; line-height: var(--lh3); color: var(--ink); }
.step__desc { font-size: 14px; line-height: var(--lh2); color: var(--body); }

/* Reviews marquee lives in branch.css (shared by the homepage and the
   O nás page). */

/* CTA card lives in branch.css (shared by the homepage and O nás). */

/* =========================================================
   Footer
   ========================================================= */
/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1400px) {
  .vouchers { grid-template-columns: minmax(0, 1fr) 520px; }
  .vouchers--flip { grid-template-columns: 520px minmax(0, 1fr); }
  .vouchers__art { transform: scale(.84); margin: -48px -48px; }
  /* V užším rastru ještě o kus dovnitř, ať nedosedne na nadpis vedle. */
  .vshot--photo { left: 300px; width: 196px; height: 294px; }
}

@media (max-width: 1180px) {

  .hero { min-height: 720px; }
  .hero__title { font-size: 48px; line-height: var(--lh6); }


  .steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .massages__head { flex-direction: column; align-items: flex-start; gap: var(--s3); }
  .massages__head .slider__nav { align-self: flex-end; }


  .hero { min-height: 0; padding-top: var(--s8); padding-bottom: var(--s8); }
  .hero__title { font-size: 40px; line-height: var(--lh5); }

  /* Balíček nad seznam, zmenšený — na telefonu je hlavní hrou klepnutí
     na důvod a fotka se přetasuje nad ním. */
  /* Nadpis → fotka → důvody v jednom sloupci. */
  .why { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .why__copy { display: contents; }
  .why__title { order: 0; margin-bottom: var(--s5); }
  .why__media { order: 1; margin: var(--s3) var(--s3) var(--s8) 0; }
  .why__clip { aspect-ratio: 4 / 3; }
  .why__list { order: 2; gap: var(--s5) var(--s4); }

  /* Split sections stack; the image goes full-bleed above the copy */

  .vouchers { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  /* The rotated overlap doesn't survive a narrow column — stack it. */
  .vouchers__art {
    position: static;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s3);
    transform: none;
    margin: 0;
    padding: var(--s1) 0;
  }
  /* Text jde vždy první, i když je v kódu artwork vlevo. */
  .vouchers--flip { grid-template-columns: minmax(0, 1fr); }
  .vouchers--flip .vouchers__art { order: 2; }

  .vshot { position: static; width: min(100%, 440px); }
  .vshot--vip { transform: rotate(-2deg); }
  /* Fotka klientky drží nativní 198 px — na mobilu ji nikdy nezvětšujeme. */
  .vshot--client { width: min(50%, 198px); height: auto; aspect-ratio: 198 / 266; transform: rotate(2deg); }

  .vshot--card { transform: rotate(-2deg); }
  .vshot--photo { width: min(56%, 232px); height: auto; aspect-ratio: 320 / 480; transform: rotate(2deg); }

  .steps__grid { align-items: stretch; }
  .step, .step--imgFirst, .step--imgLast { height: auto; justify-content: flex-start; }
  .step--imgLast { flex-direction: column-reverse; }
  .step__media { height: 296px; }
  .step__card { height: auto; min-height: 184px; }

}

@media (max-width: 640px) {
  /* On phones the arrows are redundant next to swipe, and they crowd the
     heading — the track stays swipeable and keyboard-scrollable. */
  .slider__nav { display: none; }
  .slider .mcard { flex-basis: min(280px, 78vw); }
  .slider__fade { width: 48px; }


  .hero__title { font-size: 32px; line-height: var(--lh4); }
  .hero__lede { max-width: 100%; }
  .hero__actions, .vouchers__actions, .split__actions { width: 100%; }

  /* Na mobilu se věta zalomí 2 × 2. Kosočtverec mezi položkami by na
     začátku druhého řádku visel ve vzduchu, takže tu ho nese každá
     položka zleva — jako odrážka. */
  .hero .stats { gap: var(--s1) 0; align-self: stretch; }
  .hero .stat { flex: 1 1 50%; justify-content: flex-start; }
  .hero .stat::before,
  .hero .stat + .stat::before {
    content: "";
    align-self: center;
    flex: none;
    width: 5px;
    height: 5px;
    margin: 0 var(--s1) 0 0;
    background: var(--gold);
    transform: rotate(45deg);
    opacity: .8;
  }
  .hero .stat__num, .hero .stat__num--sm { font-size: 20px; }
  .hero .stat__unit, .hero .stat__label { font-size: 14px; }

  .why__list { grid-template-columns: minmax(0, 1fr); }
  .why__name { font-size: 22px; }

  .steps__grid { grid-template-columns: minmax(0, 1fr); }

  /* Mobil — fotky se ořezávají odshora (proč, viz branch.css).
     Hero měl 50% 40 %, tedy ořez mírně nad středem; na telefonu jde
     až nahoru. Ostatní fotky na téhle stránce mají středový ořez. */
  .hero__bg { background-position: center top; }
  .step__img { background-position: center top, 0 0; }
  .vshot img { object-position: center top; }
}

/* Rozptýlená koláž (.scatter), kterou tahle stránka končí, se přestěhovala
   do branch.css — používá ji i o-nas.html a sdílené komponenty patří tam. */

/* =========================================================
   Reduced motion (global rules live in base.css)
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  /* Hero copy is revealed by a CSS animation, so it needs an explicit
     opacity reset once that animation is suppressed. */
  .hero__inner > * { opacity: 1; }
}

/* =========================================================
   Mobil — ladění (10/2026)
   ========================================================= */
@media (max-width: 960px) {
  /* Proč si nás vybírají: na telefonu není najetí myší, tak se fotka
     přepíná rolováním — přišpendlí se nahoře a mění se podle důvodu,
     který zrovna projíždí středem obrazovky (initWhy v main.js).
     Bez JS zůstane první fotka a seznam se čte normálně. */
  .why__media {
    position: sticky;
    top: 0;
    z-index: 2;
    align-self: start;
    /* Krémový podklad: důvody pod fotkou zajíždějí, nesmí prosvítat. */
    margin: 0 calc(var(--margin) * -1) var(--s4);
    padding: var(--s2) var(--margin);
    background: var(--cream);
  }
  /* Zlatý rám by přišpendlený visel přes text — na mobilu bez něj. */
  .why__frame { display: none; }
  .why__clip { aspect-ratio: 16 / 10; box-shadow: var(--shadow-2); }
  /* Pod přišpendlenou fotkou má každý důvod dost místa, aby ho šlo
     „zastavit“ uprostřed obrazovky. */
  .why__item { padding-block: var(--s3) var(--s6); }
}

@media (max-width: 640px) {
  .step__media { height: 208px; }
  .step__card { min-height: 0; }
}

/* Poukaz a VIP na mobilu: mini koláž jako na desktopu, jen ve sloupci
   textu — karta (poukaz / permanentka) leží dole vlevo, fotka stojí
   nahoře vpravo a překrývá její roh. Dřív byly pod sebou, každá jinak
   natočená, a vypadaly jako dvě náhodou položené fotky. Mřížka o šesti
   sloupcích drží obě v jednom řádku, takže se překrytí škáluje se
   šířkou displeje a nic nevyčnívá ven. */
@media (max-width: 960px) {
  .vouchers__art,
  .vouchers__art--gift {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: start;
    width: 100%;
    max-width: 480px;
    margin: var(--s2) auto 0;
    padding: var(--s2) var(--s1) var(--s4);
  }
  .vshot { position: relative; left: auto; top: auto; width: auto; height: auto; }
  .vshot--vip,
  .vshot--card {
    grid-column: 1 / 7;
    grid-row: 1;
    align-self: end;
    z-index: 1;
    margin-right: 14%;
    margin-top: 34%;
    transform: rotate(-3deg);
  }
  .vshot--client,
  .vshot--photo {
    grid-column: 5 / 7;
    grid-row: 1;
    align-self: start;
    z-index: 2;
    width: auto;
    transform: rotate(3deg);
  }
  .vshot--client { aspect-ratio: 198 / 266; }
  .vshot--photo  { aspect-ratio: 2 / 3; }
}