.crate{position:relative;container-type:inline-size}.crate-body{--theta:36deg;--apex-scale:1.08;--nudge:6px;--w:min(56vw, 250px, 46svh);--step:calc(var(--w) * .5);--lip:calc(var(--w) * .1);--lift-y:calc(var(--lip) + 14px);--top:calc(var(--w) * .28 + 18px);--cap:7rem;--persp:calc(var(--w) * 4.2);padding-bottom:var(--cap);position:relative}.crate-rack{padding:var(--top) 0 0;height:calc(var(--top) + var(--w));box-sizing:border-box;align-items:flex-end;margin:0;list-style:none;display:flex;position:relative}.crate-item{width:var(--w);height:var(--w);flex:none;justify-content:center;align-items:flex-end;margin:0;display:flex;position:relative}.crate-item+.crate-item{margin-left:calc(var(--step) - var(--w))}.crate-link{-webkit-tap-highlight-color:transparent;outline:none;justify-content:center;align-items:flex-end;width:100%;height:100%;display:flex}.crate-plate{transform-origin:50% 100%;width:100%;transform:translate(0, 0) perspective(var(--persp)) rotateY(var(--theta)) scale(1);will-change:transform;backface-visibility:hidden;background:#0d0b12;border-radius:1px;transition:transform .75s cubic-bezier(.22,.61,.36,1);display:block;position:relative;overflow:hidden;box-shadow:0 0 0 1px #e5dede29,0 22px 28px -18px #000000d9}.crate-plate img{width:100%;height:100%;position:absolute;inset:0}.crate-shade,.crate-sheen{pointer-events:none;transition:opacity .6s;position:absolute;inset:0}.crate-shade--l{opacity:1;background:linear-gradient(90deg,#07060b00 0%,#07060b2e 45%,#07060b8c 100%)}.crate-shade--r{opacity:0;background:linear-gradient(270deg,#07060b00 0%,#07060b2e 45%,#07060b8c 100%)}.crate-sheen{opacity:.55;background:linear-gradient(118deg,#ffffff1a 0%,#ffffff08 32%,#fff0 52%)}.crate-item[data-state=left] .crate-plate{transform:translate(calc(-1 * var(--nudge)), 0) perspective(var(--persp)) rotateY(var(--theta)) scale(1)}.crate-item[data-state=right] .crate-plate{transform:translate(var(--nudge), 0) perspective(var(--persp)) rotateY(calc(-1 * var(--theta))) scale(1)}.crate-item[data-state=right] .crate-shade--l{opacity:0}.crate-item[data-state=right] .crate-shade--r{opacity:1}.crate-item[data-state=apex] .crate-plate{transform:translate(0, calc(-1 * var(--lift-y))) perspective(var(--persp)) rotateY(0deg) scale(var(--apex-scale))}.crate-item[data-state=apex] .crate-shade--l,.crate-item[data-state=apex] .crate-shade--r{opacity:0}.crate-item[data-state=apex] .crate-sheen{opacity:1}.crate-rack[data-active] .crate-item:not([data-state=apex]) .crate-plate img{opacity:.72}.crate-plate img{transition:opacity .6s}.crate-rack .crate-link:focus-visible{box-shadow:none;outline:none}.crate-link:focus-visible .crate-plate{outline:2px solid rgb(var(--ink));outline-offset:4px}.crate-lip{pointer-events:none;z-index:calc(var(--n) + 5);top:calc(var(--top) + var(--w) - var(--lip));height:calc(var(--lip) + var(--cap));background:linear-gradient(180deg, #1e1628f7 0%, #100c16f7 var(--lip), #07060b61 var(--lip), #07060b00 calc(var(--lip) + 1.25rem));border-radius:2px;width:100vw;position:absolute;left:calc(50% - 50vw);box-shadow:inset 0 1px #e5dede29}.crate-cap,.crate-label{top:calc(var(--lip) + .75rem);width:var(--capw,min(19rem, calc(100vw - 2rem)));text-align:center;opacity:0;margin:0;transition:opacity .35s,transform .45s cubic-bezier(.22,.61,.36,1);position:absolute;left:50%;transform:translate(-50%,6px)}.crate-cap[data-on],.crate-label[data-on]{opacity:1;transform:translate(-50%)}.crate-rack{width:100vw;padding-inline:calc(50vw - var(--w) / 2);overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-left:calc(50% - 50vw);overflow:auto hidden}.crate-rack::-webkit-scrollbar{display:none}.crate-item{scroll-snap-align:center}.crate-rack:after{content:"";flex:none;width:1px}@media (width>=768px) and (hover:hover) and (pointer:fine){.crate-body{--theta:34deg;--apex-scale:1.1;--nudge:10px;--w:clamp(128px, 16.5cqi, 250px);--step:min(calc((100cqi - var(--w)) / (var(--n) - 1)), calc(var(--w) * .66));--top:calc(var(--w) * .3 + 18px);--cap:6rem}.crate-rack{scroll-snap-type:none;justify-content:center;width:auto;margin-left:0;padding-inline:0;overflow:visible}.crate-rack:after{content:none}.crate-lip{width:calc(var(--w) + (var(--n) - 1) * var(--step));margin-inline:auto;left:0;right:0}.crate-cap{--capw:min(19rem, 100%);left:clamp(calc(var(--capw) / 2), calc(var(--w) / 2 + var(--i) * var(--step)), calc(100% - var(--capw) / 2))}}@media (width>=900px) and (hover:hover) and (pointer:fine){.crate-body{--cap:5.25rem}}@media (prefers-reduced-motion:reduce){.crate-plate,.crate-plate img,.crate-shade,.crate-sheen,.crate-cap,.crate-label{transition:none}.crate-rack{scroll-behavior:auto}}.crate-label{display:none}@media (width>=768px) and (hover:hover) and (pointer:fine){.crate-eyebrow{display:none}.crate-label{display:block}}