*:after,*:before{margin:0;padding:0;box-sizing:border-box}:root{--active-color: hsl(204 100 53);--bg-color: #e1e3e5;--icon-default: hsl(203 5 75);--icon-accent: hsl(203 15 98);--navigation-color: hsl(203 5 25 / .3)}body{display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0;background-color:#e1e3e5;padding:20px}.container{width:100%;max-width:800px;margin:0 auto}.image-slider{display:flex;flex-direction:column;width:100%;max-width:830px;min-height:300px;overflow:hidden;border-radius:8px;container-type:inline-size;contain:content;background-color:#0006;box-shadow:#0003 0 1px 2px,#0000004d 0 2px 4px,#00000040 0 4px 8px,#0003 0 8px 16px,#00000026 0 16px 32px;padding:20px;margin:0 auto}.image-display{position:relative;width:100%;height:auto;aspect-ratio:16/9;display:flex;justify-content:center;align-items:center;overflow:hidden}.image-display img{width:100%;height:100%;object-fit:contain}.slider__content{flex-grow:1;display:flex;justify-content:space-between}.slider-control--button{border:0;background:0;outline:0;cursor:pointer;place-content:center;padding-inline:3vw;z-index:1;display:grid}.icon{height:2rem;width:2rem;fill:var(--icon-default);border-radius:50%}.slider-control--button:where(:hover){background-image:linear-gradient(to var(--position),#0000 0%,#0002,80%,#0006 100%)}.slider-control--button:where(:hover) .icon{fill:var(--icon-accent);background:#0001}.slider-control--button:active{outline:.2em solid hsl(204 100 53);outline-offset:-.5em}.prev-button{--position: left}.next-button{--position: right}.slider-navigation{position:relative;z-index:10;display:grid;grid-auto-flow:column;grid-template-columns:repeat(6,1fr);grid-auto-columns:100%;flex-wrap:wrap;gap:.25rem;padding:.1rem;place-content:center;background-color:var(--navigation-color);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.nav-button{display:grid;width:100%;height:100%;border-radius:.5em;overflow:hidden;align-items:center;justify-content:center;border:0;aspect-ratio:16 / 9;transition:filter .15s linear,scale 266ms ease}.thumbnail{display:block;max-width:100%;width:100%;object-fit:cover;height:100%}.nav-button[aria-selected=true]{scale:1.1}.nav-button[aria-selected=true],.nav-button:focus-visible{outline:.2em solid var(--active-color);outline-offset:.2em}.nav-button[aria-selected=false]{filter:opacity(.7)}.nav-button[aria-selected=false]:where(:hover,:focus-visible){filter:opacity(1)}@media screen and (max-width: 660px){.image-slider{padding:10px;min-height:450px;margin:0;width:100%}.image-display{margin-bottom:20px}.slider-navigation{display:flex;padding:1em;justify-content:center;position:relative;bottom:0;width:100%}.nav-button{inline-size:.625rem;aspect-ratio:1;border-radius:50%;margin:0 5px}.nav-button>.thumbnail{display:none}.nav-button[aria-selected=true]{background-color:#000;scale:1.5}}@media screen and (max-width: 660px) and (orientation: landscape){.image-slider{min-height:350px}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/styles.css.map */