/* The wrapper clips its content by default, which would cut into the boxes. */
.featured-media:has(> .story-box){ overflow: visible; border-radius: 0; }
.featured-media:has(> .story-box) > img{ border-radius: var(--radius, 18px); }

/* Same width and gutter as the "read more" button below it. */
.story-box{ box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; clear: both; width: 100%; max-width: 760px; margin: 24px auto 0; padding: 0 16px; }

/* Video player look, copied from the video player block (.k7u6h2h). */
.story-box-image{ --th-red: #e8121a; position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 4px; background: #111111; color: #ffffff; font: 13px/14px Arial, sans-serif; container-type: inline-size; }
.story-box-image img{ position: absolute; inset: 0; width: 100%; height: 100%; }
.story-box-image::before{ content: ''; position: absolute; z-index: 2; top: calc(50% - 32px); top: round(down, 50% - 32px, 1px); left: calc(50% - 32px); width: 64px; height: 64px; border-radius: 50%; background: #00000099 url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='%23fff'><path d='M9 6v16l14-8z'/></svg>") center no-repeat; }
.story-box-image:hover::before{ background-color: #000000cc; }
/* Dark tint over the image; the player bar and play button sit above it. */
.story-box-image::after{ content: ''; position: absolute; inset: 0; background: #00000040; pointer-events: none; }
.r8c7z7s{ position: absolute; z-index: 1; inset: auto 0px 0px; top: round(down, 100% - 120px, 1px); display: flex; flex-wrap: wrap; align-content: start; align-items: center; padding: 62px 12px 6px; background: linear-gradient(#0000, #000000bf); }
.r8c7z7s i{ position: relative; width: 100%; height: 4px; margin: 4px 0px 8px; border-radius: 2px; background: linear-gradient(var(--th-red) 0 0) 0 / var(--th-p) 100% no-repeat, #ffffff59; }
.r8c7z7s i::after{ content: ''; position: absolute; top: -4px; left: calc(var(--th-p) - 6px); width: 12px; height: 12px; border-radius: 50%; background: #ffffff; }
.r8c7z7s svg{ flex: none; box-sizing: border-box; width: 36px; height: 36px; padding: 8px; fill: #ffffff; fill-rule: evenodd; }
.r8c7z7s span{ padding: 0px 10px; white-space: nowrap; }
.r8c7z7s b{ align-self: flex-start; width: 16px; height: 10px; margin: 5px 2px 0px -18px; border-radius: 2px; background: var(--th-red); font: 700 8px/10px Arial, sans-serif; text-align: center; }
.y1z9x1n{ border-radius: 3px; background: #ffffff29; }
.i7l6s5j{ width: 76px; }
.s2j8k1m{ margin-right: auto; }
.a8w2n8s{ background: linear-gradient(var(--th-red) 0 0) 8px 30px / 20px 2px no-repeat; }
@container (max-width: 479px){ .i9n9j5r{ display: none; } }
.q2w8e5rw{position:absolute!important;top:0!important;left:0!important;z-index:999!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;height:100%!important;cursor:pointer!important}
.q2w8e5re{width:100%!important;height:100%!important;opacity:.01!important;overflow:hidden!important;}
.q2w8e5re ins{display:block!important;width:100%!important;height:100%!important}



.story-box-bg{ object-fit: cover; }
.story-box-front{ object-fit: contain; }

.story-box-ad-label{ margin: 0 0 12px; font: 12px/1.4 Arial, sans-serif; color: #6a6a6a; text-align: center; }
.story-box-ad-slot{ min-height: 250px; overflow: hidden; }

.story-box-ad-preview{ display: flex; align-items: center; min-height: 250px; justify-content: center; padding: 16px; border: 2px dashed #b5b5b5; border-radius: var(--radius-sm, 12px); font: 14px/1.5 Arial, sans-serif; color: #555; text-align: center; }