.mb{--mb-bg:#0F0F0F;--mb-line:#8A8A8A;--mb-num:#8A8A8A;--mb-title:#FFFFFF;--mb-desc:#B8B8B8;--mb-side:#8A8A8A;width:100%;background:var(--mb-bg);padding:var(--mb-pad-v,120px) var(--mb-pad-h,40px);box-sizing:border-box;overflow:hidden}.mb__inner{position:relative;max-width:1400px;margin:0 auto;display:grid;grid-template-columns:64px 1fr 1fr;align-items:center;gap:0}.mb__side{writing-mode:vertical-rl;transform:rotate(180deg);justify-self:start;align-self:center;display:flex;align-items:center;gap:24px;color:var(--mb-side);font-family:var(--font-body),"Inter",sans-serif;font-size:12px;font-weight:500;letter-spacing:.32em;text-transform:uppercase}.mb__side-arrow{width:1px;height:90px;background:var(--mb-side);position:relative}.mb__side-arrow:after{content:"";position:absolute;bottom:0;left:50%;width:6px;height:6px;border-left:1px solid var(--mb-side);border-bottom:1px solid var(--mb-side);transform:translate(-50%) rotate(-45deg)}.mb__stage{position:relative;height:var(--mb-stage-h,620px);perspective:1600px}.mb__layers{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotateY(-32deg) rotateX(4deg);transform-style:preserve-3d;width:var(--mb-panel-w,300px);height:var(--mb-panel-h,520px)}.mb__layer{position:absolute;top:0;left:0;width:100%;height:100%;transform:translate(var(--x)) translateZ(var(--z));transition:transform .9s cubic-bezier(.19,1,.22,1),opacity .9s cubic-bezier(.19,1,.22,1),filter .9s cubic-bezier(.19,1,.22,1);cursor:pointer;box-shadow:0 40px 80px #0000008c}.mb__layer-img{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.mb__layer-img img{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important;max-width:none!important;min-width:100%!important;min-height:100%!important;object-fit:cover!important;display:block;pointer-events:none}.mb__layer-placeholder{position:absolute;top:0;left:0;width:100%;height:100%;background:#1a1a1a;border:1px solid #E5E5E5;display:flex;align-items:center;justify-content:center}.mb__layer-placeholder svg{width:56px;height:56px;opacity:.3}.mb__layers.is-active .mb__layer{opacity:.4;filter:brightness(.6)}.mb__layer.is-float{transform:translate(var(--x)) translateZ(calc(var(--z) + 160px)) translateY(-24px);opacity:1!important;filter:brightness(1)!important;box-shadow:0 60px 120px #000000b3}.mb__labels{position:relative;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:var(--mb-label-gap,64px);padding-left:40px}.mb__label{display:flex;align-items:flex-start;gap:20px;opacity:.55;transition:opacity .9s cubic-bezier(.19,1,.22,1);cursor:pointer}.mb__label.is-active{opacity:1}.mb__label-lead{flex:0 0 auto;width:48px;height:1px;background:var(--mb-line);margin-top:11px;position:relative}.mb__label-lead:before{content:"";position:absolute;left:0;top:50%;width:5px;height:5px;border:1px solid var(--mb-line);border-radius:50%;transform:translate(-50%,-50%);background:var(--mb-bg)}.mb__label-num{font-family:var(--font-heading),"Bodoni Moda",serif;font-size:14px;color:var(--mb-num);letter-spacing:.1em;margin-right:4px}.mb__label-text{font-family:var(--font-body),"Inter",sans-serif}.mb__label-title{font-size:14px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--mb-title);line-height:1.5}.mb__label-desc{font-size:12px;letter-spacing:.04em;color:var(--mb-desc);margin-top:6px;line-height:1.6}@media(max-width:989px){.mb__inner{grid-template-columns:40px 1fr;gap:32px}.mb__labels{grid-column:2;padding-left:0}.mb__stage{grid-column:2;height:var(--mb-stage-h-mobile,460px)}}@media(max-width:749px){.mb{padding:var(--mb-pad-v-mobile,72px) var(--mb-pad-h-mobile,24px)}.mb__inner{grid-template-columns:1fr;gap:48px}.mb__side{flex-direction:row;writing-mode:horizontal-tb;transform:none;grid-column:1}.mb__side-arrow{width:70px;height:1px}.mb__side-arrow:after{bottom:auto;top:50%;left:auto;right:0;transform:translateY(-50%) rotate(-135deg)}.mb__stage{grid-column:1;height:var(--mb-stage-h-mobile,420px)}.mb__layers{width:var(--mb-panel-w-mobile,220px);height:var(--mb-panel-h-mobile,380px);transform:translate(-50%,-50%) rotateY(-28deg) rotateX(3deg)}.mb__labels{grid-column:1;gap:40px}}
/*# sourceMappingURL=/cdn/shop/t/19/assets/material-breakdown.css.map */