.deferred-video { background: #17130f; }
.deferred-video-cover { display: block; position: relative; cursor: pointer; }
.deferred-video-cover img, .deferred-video video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: contain; background: #17130f; }
.deferred-video-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.deferred-video-play span { display: grid; place-items: center; width: 64px; height: 64px; border: 2px solid #fff; border-radius: 50%; background: #3e3124; color: #fff; font-size: 1.5rem; padding-left: 4px; }
.deferred-video-cover:hover .deferred-video-play span { background: #9c2a1c; }
.deferred-video-cover:active .deferred-video-play span { background: #6e1e14; }
.deferred-video-cover:focus-visible, .deferred-video video:focus-visible, .gallery-preview-image:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 5px; }
.deferred-video-error { padding: 1rem; margin: 0; color: #fff; }
.gallery-preview { background: var(--color-surface-field); border-block: var(--border-rule); }
.gallery-preview-inner { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.gallery-preview-image { display: block; background: var(--color-bg-dark); }
.gallery-preview-image img { display: block; width: 100%; height: auto; aspect-ratio: 640 / 859; object-fit: contain; }
.gallery-preview-image:hover { outline: 3px solid var(--color-primary); }
.gallery-preview-image:active { opacity: 0.85; }
.gallery-preview h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; margin: 0 0 1rem; }
.gallery-preview p { max-width: 42ch; margin: 0 0 1.5rem; }
@media (max-width: 600px) {
  .gallery-preview-inner { grid-template-columns: minmax(0, 1fr); }
  .gallery-preview-image { width: min(100%, 360px); margin-inline: auto; }
  .deferred-video-cover img, .deferred-video video { max-height: 70dvh; }
}