.product-composition {
  position: relative; height: 100svh; min-height: 650px; overflow: hidden;
  background: #efeee9; isolation: isolate;
}
.product-composition::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 38%, #fff, transparent 48%); }
.product-composition::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: 0; height: 3px; background: var(--accent); z-index: 10; }
.composition-label { position: absolute; top: 82px; left: 20px; right: 20px; z-index: 8; display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; letter-spacing: .04em; }
.composition-label b { font-weight: 400; }
.composition-image { position: absolute; display: block; overflow: hidden; padding: 0; border: 0; border-radius: 14px; background: #d5d4cf; box-shadow: 0 16px 40px rgba(29,29,27,.14); transition: transform .5s cubic-bezier(.65,0,.25,1), opacity .22s, filter .3s; }
.composition-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.composition-image.main { top: 19%; left: 15%; z-index: 5; width: 70%; height: 60%; transform: rotate(-1deg); }
.composition-image.side { z-index: 2; width: 41%; height: 34%; filter: saturate(.88) brightness(.96); }
.composition-image.side.left { top: 29%; left: -18%; transform: rotate(-6deg); }
.composition-image.side.right { top: 51%; right: -17%; z-index: 6; transform: rotate(6deg); }
.composition-image.main:hover { transform: rotate(0) scale(1.008); }
.composition-image.side.left:hover { transform: translateX(8%) rotate(-3deg); filter: none; }
.composition-image.side.right:hover { transform: translateX(-8%) rotate(3deg); filter: none; }
.composition-image.swapping { opacity: .2; transform: scale(.94) rotate(0); }
.composition-count { position: absolute; top: 15%; right: 20px; z-index: 8; color: var(--muted); font-size: 10px; }
.composition-name { position: absolute; left: 17px; bottom: 7%; z-index: 1; max-width: 92%; overflow: hidden; color: rgba(29,29,27,.07); font-size: clamp(62px,19vw,94px); font-weight: 600; line-height: .78; letter-spacing: -.09em; white-space: nowrap; pointer-events: none; }
.composition-scroll { position: absolute; left: 20px; bottom: 18px; z-index: 9; color: var(--muted); font-size: 9px; letter-spacing: .04em; }
@media (min-width:720px){
  .composition-image.main{left:22%;width:56%;}
  .composition-image.side{width:31%;}
  .composition-image.side.left{left:-8%;}
  .composition-image.side.right{right:-7%;}
  .composition-name{font-size:clamp(86px,13vw,150px);}
}
@media (min-width:1100px){
  .product-composition{height:100svh;min-height:700px;}
  .composition-label{top:92px;left:34px;right:34px;}
  .composition-image.main{top:16%;left:24%;width:52%;height:67%;}
  .composition-image.side{width:28%;height:38%;}
  .composition-image.side.left{top:27%;left:-6%;}
  .composition-image.side.right{top:49%;right:-5%;}
  .composition-count{top:12%;right:34px;}
  .composition-name{left:28px;bottom:8%;font-size:clamp(100px,10vw,180px);}
  .composition-scroll{display:none;}
}
@media (prefers-reduced-motion:reduce){.composition-image{transition-duration:.01ms}}