md-video-stories.md-video-stories{--md-video-green: #2c5f2d;--md-video-cream: #fff9e9;--md-video-yellow: #ffca08;display:block;padding:clamp(4rem,5.5vw,7.2rem) 0;background:#fcf8ed;color:var(--md-video-green);font-family:var(--font-body-family)}.md-video-stories__inner{max-width:132rem}.md-video-stories__header{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:2.6rem}.md-video-stories__heading{margin:0;color:var(--md-video-green);font-family:var(--font-heading-family);font-size:clamp(3.6rem,4vw,5.4rem);font-weight:var(--font-heading-weight);line-height:1.02;letter-spacing:-.015em}.md-video-stories__subheading{margin:1rem 0 0;font-size:2rem;line-height:1.35;color:#57674c}.md-video-stories__hint{max-width:27rem;margin:0 0 .2rem;font-size:1.6rem;line-height:1.35;color:#57674c;text-align:right}.md-video-stories__hint-mobile{display:none}.md-video-stories__rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 5.4rem)/4);gap:1.8rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:.2rem;margin:-.4rem -.4rem -.6rem;padding:.4rem .4rem 1.8rem;list-style:none;scrollbar-width:thin;scrollbar-color:#b8c3a7 transparent;-webkit-overflow-scrolling:touch}.md-video-stories__rail::-webkit-scrollbar{height:.4rem}.md-video-stories__rail::-webkit-scrollbar-thumb{border-radius:1rem;background:#b8c3a7}.md-video-stories__card{min-width:0;padding:0;scroll-snap-align:start;scroll-snap-stop:normal}.md-video-stories__media{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:9 / 16;border:1px solid #2c5f2d1f;border-radius:2.4rem;background:#dde4d4;box-shadow:0 .4rem 1.2rem #2c5f2d0a;transition:box-shadow .16s ease-out,border-color .16s ease-out}.md-video-stories__video,.md-video-stories__poster{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}.md-video-stories__video{z-index:0}.md-video-stories__poster{z-index:1;pointer-events:none}.md-video-stories__card[data-has-frame=true] .md-video-stories__poster{visibility:hidden}.md-video-stories__shade{position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#142c1417,transparent 25%,transparent 52%,#142c1480);pointer-events:none}.md-video-stories__creator{position:absolute;z-index:3;top:1.6rem;left:1.6rem;max-width:calc(100% - 3.2rem);padding:.5rem 1rem .6rem;border-radius:2rem;background:#fff9e9f2;color:#244b2b;font-size:1.6rem;font-weight:600;line-height:1.1;overflow-wrap:anywhere}.md-video-stories__caption{position:absolute;z-index:3;bottom:7.2rem;left:1.8rem;right:1.8rem;margin:0;color:#fff;font-size:2rem;font-weight:600;line-height:1.2;text-shadow:0 1px 8px #0006;overflow-wrap:anywhere;pointer-events:none}.md-video-stories__controls{position:absolute;z-index:4;right:1.4rem;bottom:1.4rem;left:1.4rem;display:flex;align-items:center;justify-content:space-between;gap:.8rem;pointer-events:none}.md-video-stories__button{display:grid;flex:0 0 4.8rem;place-items:center;box-sizing:border-box;width:4.8rem;height:4.8rem;min-width:4.8rem;min-height:4.8rem;margin:0;padding:1.2rem;border:1px solid #fff9e94d;border-radius:50%;appearance:none;-webkit-appearance:none;background:var(--md-video-cream);color:#244b2b;cursor:pointer;pointer-events:auto;touch-action:manipulation;box-shadow:0 .2rem .8rem #00000014;transition:background-color .12s ease-out,color .12s ease-out}.md-video-stories__button--sound{background:#163d20d9;color:var(--md-video-cream)}.md-video-stories__button--sound[aria-pressed=true]{background:var(--md-video-yellow);color:#244b2b;border-color:var(--md-video-yellow)}.md-video-stories__button span,.md-video-stories__button svg{display:block;width:2.4rem;height:2.4rem}.md-video-stories__button [data-md-icon-pause],.md-video-stories__button [data-md-icon-sound],.md-video-stories__card[data-playing=true] [data-md-icon-play],.md-video-stories__card[data-audible=true] [data-md-icon-muted]{display:none}.md-video-stories__card[data-playing=true] [data-md-icon-pause],.md-video-stories__card[data-audible=true] [data-md-icon-sound]{display:block}.md-video-stories__button:focus-visible{outline:3px solid var(--md-video-yellow);outline-offset:4px}.md-video-stories__status{flex:1 1 auto;min-width:0;max-width:18rem;border-radius:.8rem;color:#fff;font-size:1.4rem;line-height:1.2;text-align:center;text-shadow:0 1px 4px #000}.md-video-stories__status:empty{display:none}.md-video-stories__empty,.md-video-stories__no-script{margin:0;padding:2rem;border:1px dashed #b8c3a7;border-radius:1.6rem;color:#57674c;font-size:1.8rem}@media(hover:hover)and (pointer:fine){.md-video-stories__card:hover .md-video-stories__media{border-color:#8a9e74;box-shadow:0 0 0 2px #f2d277}.md-video-stories__button:hover{background:var(--md-video-yellow);color:#244b2b}}@media(max-width:1099px)and (min-width:750px){.md-video-stories__rail{grid-auto-columns:calc((100% - 3.6rem) / 3)}}@media(min-width:750px){.md-video-stories[data-video-count="2"] .md-video-stories__header{display:block;text-align:center}.md-video-stories[data-video-count="2"] .md-video-stories__hint{max-width:none;margin-top:1.4rem;text-align:center}.md-video-stories[data-video-count="2"] .md-video-stories__rail{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:62rem;margin-inline:auto}}@media(max-width:749px){md-video-stories.md-video-stories{padding:3.6rem 0 3.2rem;overflow:clip}.md-video-stories__inner.page-width{padding-inline:2rem}.md-video-stories__header{display:block;margin-bottom:2rem}.md-video-stories__subheading{margin-top:.7rem;font-size:1.8rem}.md-video-stories__hint{max-width:none;margin-top:1.2rem;font-size:1.5rem;text-align:left}.md-video-stories__hint-desktop{display:none}.md-video-stories__hint-mobile{display:inline}.md-video-stories__rail{grid-auto-columns:74%;gap:1.2rem;margin-right:-2rem;padding-right:2rem;scroll-padding-inline:.4rem}.md-video-stories__media{border-radius:2rem}}@media(prefers-reduced-motion:reduce){.md-video-stories__media,.md-video-stories__button{transition:none}}@media(hover:none),(pointer:coarse){.md-video-stories__hint-desktop{display:none}.md-video-stories__hint-mobile{display:inline}}
/*# sourceMappingURL=/cdn/shop/t/42/assets/md-video-stories.css.map */