.grades-sec{position:relative;overflow:hidden;padding:clamp(5rem,8vw,8rem) 0}.grades-comb{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;background-image:url(honeycomb.svg);background-size:54px 94px;background-repeat:repeat;opacity:var(--comb-opacity, .08)}.grades-inner{position:relative;z-index:1}.g2{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2.4rem,5vw,6rem);align-items:center}.grades-eyebrow{font-size:1.2rem;letter-spacing:.3em;text-transform:uppercase;opacity:.7;margin:0 0 1rem}.g2__heading{font-size:clamp(2.4rem,3.4vw,3.6rem);line-height:1.16;margin:0 0 1.6rem;max-width:20ch}.g2__intro{font-size:1.5rem;line-height:1.65;opacity:.82;margin:0 0 2.2rem;max-width:46ch}.g2__active{font-family:var(--font-heading-family);color:rgb(var(--color-button));font-size:clamp(2rem,2.6vw,2.6rem);font-weight:600;margin:0 0 1.6rem}.g2__benefits{list-style:none;margin:0;padding:0}.g2__benefits li{display:flex;align-items:center;gap:1.1rem;font-size:1.5rem;line-height:1.3;max-height:0;margin:0;opacity:0;overflow:hidden;transform:translate(-.8rem);transition:max-height .45s ease,opacity .4s ease,margin .45s ease,transform .45s ease}.g2__benefits li.is-on{max-height:6rem;opacity:1;margin-bottom:1.2rem;transform:none}.g2__benefits li.is-on:last-child{margin-bottom:0}.g2__check{flex:0 0 auto;width:2.2rem;height:2.2rem;border-radius:50%;border:2px solid rgba(var(--color-foreground),.3);position:relative;transition:background .4s ease,border-color .4s ease}.g2__benefits li.is-on .g2__check{background:rgb(var(--color-button));border-color:rgb(var(--color-button))}.g2__benefits li.is-on .g2__check:after{content:"";position:absolute;left:50%;top:46%;width:.5rem;height:.9rem;border:solid #fff;border-width:0 .22rem .22rem 0;transform:translate(-50%,-55%) rotate(45deg)}.g2__right{position:relative}.g2__stage{position:relative;height:clamp(32rem,40vw,42rem);touch-action:pan-y}.g2-jar{position:absolute;top:50%;left:50%;width:clamp(21rem,26vw,30rem);margin:0;cursor:pointer;transform:translate(-50%,-50%);transition:transform .55s cubic-bezier(.22,.61,.36,1),opacity .5s ease;filter:drop-shadow(0 2.4rem 3.2rem rgba(38,26,13,.3))}.g2-jar__img{display:block;width:100%;height:auto}.g2-jar__badge{position:absolute;top:-.6rem;left:50%;transform:translate(-50%);z-index:3;background:#241a0c;color:#fff;font-size:1rem;letter-spacing:.1em;text-transform:uppercase;padding:.45rem 1.2rem;border-radius:10rem;white-space:nowrap}.g2-jar__fallback{display:grid;place-items:center;gap:.6rem;aspect-ratio:1;border-radius:2rem 2rem 4.5rem 4.5rem;background:rgb(var(--color-button));color:#241a0c;text-align:center}.g2-jar__fallback-umf{font-family:var(--font-heading-family);font-size:clamp(2.8rem,3vw,3.6rem);font-weight:600;line-height:1}.g2-jar__fallback-mgo{font-size:1.2rem;letter-spacing:.12em;text-transform:uppercase;opacity:.78}.g2__caption{position:relative;z-index:5;text-align:center;margin-top:1.2rem}.g2__tag{font-family:var(--font-heading-family);color:rgb(var(--color-button));font-size:clamp(1.7rem,2vw,2.1rem);font-weight:600;letter-spacing:.02em;margin:0 0 1.4rem;transition:opacity .3s ease}.g2__shop{display:inline-block;min-width:22rem;padding:1.25rem 2.6rem;border-radius:10rem;background:rgb(var(--color-button));color:#fff;font-weight:600;font-size:1.5rem;letter-spacing:.02em;text-decoration:none;transition:filter .3s ease,transform .3s ease}.g2__shop:hover{filter:brightness(1.06);transform:translateY(-.2rem)}.g2__nav{display:flex;justify-content:center;gap:1.4rem;margin-top:2rem;position:relative;z-index:5}.g2__arrow{width:4.6rem;height:4.6rem;border-radius:50%;border:1px solid rgba(var(--color-foreground),.3);background:transparent;color:rgb(var(--color-foreground));font-size:2.2rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .3s ease,border-color .3s ease,color .3s ease}.g2__arrow:hover{background:rgb(var(--color-button));border-color:rgb(var(--color-button));color:#241a0c}@media screen and (max-width:989px){.g2{grid-template-columns:1fr;gap:3.2rem}.g2__left{text-align:center}.g2__heading,.g2__intro{max-width:50ch;margin-left:auto;margin-right:auto}.g2__benefits{max-width:38rem;margin:0 auto;text-align:left}}@media screen and (max-width:749px){.g2-jar{width:66%}.g2__stage{height:38rem}.g2__shop{min-width:20rem}}[dir=rtl] .g2__benefits{text-align:right}[dir=rtl] .g2__benefits li{transform:translate(.8rem)}[dir=rtl] .g2__benefits li.is-on{transform:none}.g2__stage,.g2__nav{direction:ltr}[dir=rtl] .g2__active{direction:ltr;text-align:right}
/*# sourceMappingURL=/cdn/shop/t/8/assets/section-grades-scroll.css.map */
