.play-header{margin-bottom:36px}
.play-description{max-width:720px;margin:24px 0 0;font-size:16px;line-height:1.7;color:#565b52}
.play-gallery{display:grid;grid-template-columns:minmax(0,2.4fr) repeat(2,minmax(0,1fr));gap:22px;height:clamp(300px,34vw,460px)}
.play-thumbnail{min-width:0;overflow:hidden;border-radius:10px;background:#efefea}
@media(max-width:700px){.play-header{margin-bottom:28px}.play-description{font-size:14px;margin-top:20px}.play-gallery{height:auto;grid-template-columns:1fr;gap:20px}.play-thumbnail{aspect-ratio:1.3}}

.play-thumbnail-video{position:relative;background:#D2DCE5}
.play-thumbnail-video video{position:absolute;left:50%;top:50%;display:block;width:var(--play-video-width,100%);height:auto;aspect-ratio:2800/1990;max-width:none;object-fit:contain;transform:translate(-51.55%,-50%);border:0;background:#D2DCE5}

.play-thumbnail-video{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:default}
.play-thumbnail-video video{pointer-events:none;-webkit-user-drag:none;-webkit-touch-callout:none}

.play-thumbnail-image{position:relative;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:default}
.play-thumbnail-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;-webkit-user-drag:none}

.play-gallery{--play-columns:minmax(0,2.4fr) minmax(0,1fr) minmax(0,1fr);grid-template-columns:var(--play-columns);transition:grid-template-columns .5s cubic-bezier(.22,1,.36,1)}
.play-thumbnail[role=button]{cursor:pointer}
.play-thumbnail[role=button]:focus-visible{outline:2px solid #2448e3;outline-offset:4px}
@media(max-width:700px){.play-gallery{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.play-gallery{transition:none}}

/* Keep unfilled slots available in markup, but show only supplied media. */
.play-thumbnail:not(:has(img,video)){display:none}
.play-gallery:has(>.play-thumbnail:not(:has(img,video))){--play-columns:minmax(0,2.4fr) minmax(0,1fr)}