/* Home (card component lives in cards.css) */
.reel { width: 100%; max-width: 1200px; aspect-ratio: 1.84127; max-height: 652px; }
.reel .yt { width: 100%; height: 100%; border-radius: 10px; }
/* Muted first seconds of the showreel; the full reel with sound opens on click */
.reel-loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.work { width: 100%; max-width: 1200px; display: flex; flex-direction: column; gap: 10px; }

/* Wide card: video strip on desktop/tablet, square loop on phone */
.card-wide { width: 100%; background: var(--card); border-radius: 10px; }
.card-wide-video { flex: none; width: 1160px; aspect-ratio: 3.625; }
.card-wide-video > * { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.card-wide-gif { display: none; }

.row3 { width: 100%; display: flex; gap: 10px; }
.card-sq { flex: 1 0 0; width: 1px; }

@media (max-width: 809.98px) {
  .card-wide { height: 350px; }
  .card-wide-video { display: none; }
  .card-wide-gif { display: block; position: absolute; top: 0; left: calc(49.7143% - 175.5px); width: 351px; height: 350px; object-fit: cover; }

  .row3 { flex-direction: column; }
  .card-sq { flex: none; width: 100%; }
}