.hp-reel{--reel-gap: 20px;--reel-w: 520px;--reel-radius: var(--blocks-radius)}.hp-reel{display:grid;grid-template-columns:1fr auto;grid-template-areas:"intro nav" "track track";align-items:end;column-gap:24px;row-gap:28px}.hp-reel__intro{grid-area:intro}.hp-reel__nav{grid-area:nav}.hp-reel__track{grid-area:track}.hp-reel__title{margin:0;white-space:pre-line}.hp-reel__link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;white-space:nowrap;color:rgb(var(--color-foreground));transition:color var(--m-duration-default) ease}.hp-reel__link:hover{color:rgb(var(--color-button-hover))}.hp-reel__link svg{width:1em;height:1em}.hp-reel__nav{display:flex;gap:6px}.hp-reel__arrow{margin:0;transition:opacity var(--m-duration-default) ease,background-color var(--m-duration-default) ease}.hp-reel__arrow:focus-visible{outline:2px solid rgb(var(--color-heading));outline-offset:2px}.hp-reel__arrow[disabled]{pointer-events:none}.hp-reel__track{display:flex;gap:var(--reel-gap);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.hp-reel__track::-webkit-scrollbar{display:none}.hp-reel__track.is-dragging,.hp-reel__track.is-settling{scroll-snap-type:none}.hp-reel__track:focus-visible{outline:2px solid rgb(var(--color-heading));outline-offset:4px}@media(hover:hover)and (pointer:fine){.hp-reel[data-rail-drag=true] .hp-reel__track{cursor:grab}.hp-reel[data-rail-drag=true] .hp-reel__track.is-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}.hp-reel__track.is-dragging a,.hp-reel__track.is-dragging img{pointer-events:none}}.hp-reel__slide{flex:0 0 var(--reel-w);scroll-snap-align:start;display:flex;flex-direction:column}.hp-reel__card{position:relative;overflow:hidden;border-radius:var(--reel-radius);aspect-ratio:var(--slide-ratio, 4 / 3);background-color:rgb(var(--color-background-secondary))}.hp-reel__card img,.hp-reel__card video{display:block;width:100%;height:100%;object-fit:cover}.hp-reel__placeholder{width:100%;height:100%}.hp-reel__caption{margin:16px 2px 0;color:rgb(var(--color-foreground-secondary))}.hp-reel__caption strong{color:rgb(var(--color-heading))}.hp-reel__footnote{font-size:.75em;vertical-align:super}@media(max-width:767px){.hp-reel{grid-template-columns:1fr;grid-template-areas:"intro" "track" "nav";row-gap:18px}.hp-reel__nav{justify-content:flex-start}.hp-reel__caption{margin-top:12px}}@media(prefers-reduced-motion:reduce){.hp-reel__link{transition:none}}.hp-reel[data-track-width=fluid] .hp-reel__track,.hp-reel[data-track-width=full] .hp-reel__track{--reel-offset: max(var(--reel-cp, 15px), calc((100vw - min(var(--reel-cw, 1170px), 100vw)) / 2 + var(--reel-cp, 15px)));width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);padding-inline-start:var(--reel-offset);padding-inline-end:0;scroll-padding-inline-start:var(--reel-offset)}.hp-reel[data-track-width=fluid] .hp-reel__track{width:min(var(--fluid-container-width, 1750px),100vw);margin-inline:calc(50% - min(calc(var(--fluid-container-width, 1750px) / 2),50vw))}.hp-reel[data-track-width=full] .hp-reel__track{padding-inline-start:0;scroll-padding-inline-start:0}.hp-reel[data-arrow-pos]{position:relative}@media(min-width:768px){.hp-reel[data-arrow-pos=bottom-right] .hp-reel__nav{justify-content:flex-end}.hp-reel[data-arrow-pos=bottom-left] .hp-reel__nav{justify-content:flex-start}.hp-reel[data-arrow-pos=bottom-centre] .hp-reel__nav{justify-content:center}.hp-reel[data-arrow-pos^=bottom] .hp-reel__nav{grid-area:auto;grid-column:1 / -1;margin-top:16px;display:flex;gap:6px}.hp-reel[data-arrow-pos=top-right] .hp-reel__nav{grid-area:nav;margin-top:0}}@media(max-width:767px){.hp-reel[data-arrow-pos-mobile=bottom-right] .hp-reel__nav{justify-content:flex-end}.hp-reel[data-arrow-pos-mobile=bottom-left] .hp-reel__nav{justify-content:flex-start}.hp-reel[data-arrow-pos-mobile=bottom-centre] .hp-reel__nav{justify-content:center}.hp-reel[data-arrow-pos-mobile^=bottom] .hp-reel__nav{grid-area:auto;grid-column:1 / -1;margin-top:16px;display:flex;gap:6px}.hp-reel[data-arrow-pos-mobile=top-right] .hp-reel__nav{grid-area:nav;margin-top:0}}
/*# sourceMappingURL=/cdn/shop/t/24/assets/feature-reel.css.map */