.scroll-shelf{height:360vh;background:#171717;color:#fff}.shelf-sticky{position:sticky;top:0;height:100vh;overflow:hidden;padding:5vh 0}.shelf-sticky>header{height:18vh;display:grid;grid-template-columns:1fr auto;align-items:end;padding:0 4vw}.shelf-sticky h2{margin:0;font-size:clamp(52px,8vw,110px);font-weight:400;line-height:.85}.shelf-sticky small,.shelf-sticky header p{font:11px Arial;letter-spacing:.16em}.shelf-viewport{height:72vh;overflow:hidden;padding-left:4vw}.shelf-track{display:flex;gap:2vw;width:max-content;will-change:transform}.shelf-item{position:relative;width:46vw;height:62vh;display:grid;grid-template-columns:1fr auto;align-content:end;padding:2.5vw;border-radius:34px;color:#171717;overflow:hidden}.shelf-item i{position:absolute;z-index:2;left:24px;top:20px;font:12px Arial;font-style:normal}.shelf-item figure{position:absolute;inset:0;margin:0;background:url("../images/showcase-online-shop-hero.png") center/cover}.shelf-item:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,#fff 58%)}.shelf-item h3,.shelf-item p{position:relative;z-index:1}.shelf-item h3{grid-column:1/-1;margin:0;font-size:clamp(30px,4vw,58px);font-weight:400}.shelf-item p{max-width:440px}.shelf-item.linen figure{background-position:15% center}.shelf-item.brush figure{background-position:82% center}.shelf-item.cup figure{background-position:center 20%}.shelf-item:nth-child(2){background:#d8e1cf}.shelf-item:nth-child(3){background:#ffd931}.shelf-item:nth-child(4){background:#cbb9ff}
@media(max-width:760px){.shelf-item{width:82vw;height:58vh;padding:22px}.shelf-sticky>header{height:20vh}.shelf-viewport{height:68vh}.shelf-item h3{font-size:34px}}
@media(prefers-reduced-motion:reduce){.scroll-shelf{height:auto}.shelf-sticky{position:relative;height:auto}.shelf-viewport{height:auto;overflow:auto}.shelf-track{transform:none!important}.shelf-item{min-width:82vw}}