.topper-use-cases{background:#fff}.topper-use-cases__inner{display:flex;flex-direction:column;gap:calc(28 * 100vw / 430)}.topper-use-cases__header{text-align:center}.topper-use-cases__heading{margin:0 0 calc(12 * 100vw / 430);color:#024488;font-family:Google Sans Flex,sans-serif;font-weight:600;font-size:calc(28 * 100vw / 430);line-height:1.3}.topper-use-cases__heading--desktop{display:none}.topper-use-cases__heading--mobile{display:block}.topper-use-cases__highlight{position:relative;z-index:0}.topper-use-cases__highlight:before{content:"";position:absolute;left:-.04em;right:-.04em;bottom:.02em;height:45%;background:#ffc107;z-index:-1;border-radius:2px}.topper-use-cases__intro{margin:0 auto;max-width:28em;color:#8a8a8a;font-family:Google Sans Flex,sans-serif;font-size:calc(17 * 100vw / 430);line-height:1.5}.topper-use-cases__intro--desktop{display:none}.topper-use-cases__intro--mobile{display:block}.topper-use-cases__grid{display:flex;flex-direction:column;gap:calc(12 * 100vw / 430);margin:0;padding:0;list-style:none}.topper-use-cases__card{overflow:hidden;border-radius:calc(20 * 100vw / 430)}.topper-use-cases__btn{position:relative;display:block;width:100%;margin:0;padding:0;border:0;background:#cfdced;cursor:pointer;text-align:left;overflow:hidden;color:#fff}.topper-use-cases__num{font-family:Google Sans Flex,sans-serif;font-weight:600;line-height:1}.topper-use-cases__media{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}.topper-use-cases__image{display:block;width:100%;height:100%;object-fit:cover}.topper-use-cases__media--split .topper-use-cases__image--desktop{display:none}.topper-use-cases__media--split .topper-use-cases__image--mobile{display:block}.topper-use-cases__overlay{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;color:#fff}.topper-use-cases__title{font-family:Google Sans Flex,sans-serif;font-weight:600;font-size:calc(15 * 100vw / 430);line-height:1.3}.topper-use-cases__rule{display:block;width:calc(40 * 100vw / 430);height:1px;background:#ffffffd9}.topper-use-cases__text{font-family:Google Sans Flex,sans-serif;font-weight:300;font-size:calc(17 * 100vw / 430);line-height:1.5;color:#ffffffeb;display:block}.topper-use-cases__text-inner{display:block}.topper-use-cases__chevron{display:none}@media screen and (max-width:749px){.topper-use-cases__btn{max-height:calc(56 * 100vw / 430);transition:max-height .4s cubic-bezier(.22,1,.36,1)}.topper-use-cases__card.is-open .topper-use-cases__btn{max-height:calc(100vw * 569 / 363)}.topper-use-cases__card.is-open{box-shadow:0 10px 28px #00000024}.topper-use-cases__card.is-open .topper-use-cases__image{transform:scale(1.1)}.topper-use-cases__card:not(.is-open) .topper-use-cases__btn{display:block!important;position:relative;min-height:calc(56 * 100vw / 430);padding:calc(14 * 100vw / 430) calc(64 * 100vw / 430) calc(14 * 100vw / 430) calc(18 * 100vw / 430);background:#cfdced}.topper-use-cases__card:not(.is-open) .topper-use-cases__media{display:none}.topper-use-cases__card:not(.is-open) .topper-use-cases__overlay{position:static;display:block;width:100%;padding:0;background:none;gap:0}.topper-use-cases__card:not(.is-open) .topper-use-cases__title{display:block;color:#fff;padding-right:0}.topper-use-cases__card:not(.is-open) .topper-use-cases__rule,.topper-use-cases__card:not(.is-open) .topper-use-cases__text,.topper-use-cases__card:not(.is-open) .topper-use-cases__chevron{max-height:0;overflow:hidden;opacity:0}.topper-use-cases__card:not(.is-open) .topper-use-cases__num{position:absolute;top:50%;right:calc(18 * 100vw / 430);z-index:2;display:block;margin:0;transform:translateY(-50%);color:#fff;font-size:calc(28 * 100vw / 430);line-height:1;pointer-events:none}.topper-use-cases__card.is-open .topper-use-cases__btn{display:block!important;min-height:0;padding:0;background:#1a1a1a}.topper-use-cases__card.is-open .topper-use-cases__num{transform:none}.topper-use-cases__card.is-open .topper-use-cases__media{position:relative;inset:auto;display:block;width:100%;aspect-ratio:363 / 569}.topper-use-cases__card.is-open .topper-use-cases__image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:auto;object-fit:cover}.topper-use-cases__card.is-open .topper-use-cases__btn{transition:max-height .4s linear 0s!important}.topper-use-cases__card.is-open .topper-use-cases__overlay{position:absolute;left:0;right:0;bottom:0;gap:calc(9 * 100vw / 430);padding:calc(28 * 100vw / 430) calc(18 * 100vw / 430) calc(18 * 100vw / 430);transition:gap 0s ease 0s}.topper-use-cases__card.is-open .topper-use-cases__title{font-size:calc(22 * 100vw / 430);margin-bottom:calc(4 * 100vw / 430)}.topper-use-cases__card.is-open .topper-use-cases__media:after{content:"";display:block;position:absolute;background:linear-gradient(180deg,#916c4700,#916c47);width:100%;height:60%;left:0;bottom:0}.topper-use-cases__card.is-open .topper-use-cases__rule,.topper-use-cases__card.is-open .topper-use-cases__text{transition:all .4s ease 0s;max-height:100px}.topper-use-cases__card.is-open .topper-use-cases__num{position:absolute;top:calc(16 * 100vw / 430);right:calc(16 * 100vw / 430);z-index:2;display:flex;align-items:center;justify-content:center;width:calc(48 * 100vw / 430);height:calc(48 * 100vw / 430);margin:0;border-radius:50%;background:#d3dff39f;color:#fff;font-size:calc(28 * 100vw / 430);transition:all .4s ease 0s,top 0s ease 0s,transform 0s ease 0s,border-radius 0s 0s}.topper-use-cases__card{scroll-margin-top:70px}}@media screen and (max-width:749px){.topper-use-cases__grid{height:calc(788 * 100vw / 390)}}@media screen and (min-width:750px){.topper-use-cases__inner{gap:min(40px,calc(40 * 100vw / 1920));max-width:1684px}.topper-use-cases__heading{margin-bottom:min(24px,1.25vw);font-size:min(36px,1.875vw)}.topper-use-cases__heading--desktop{display:block}.topper-use-cases__heading--mobile{display:none}.topper-use-cases__highlight:before{height:45%;bottom:.1em}.topper-use-cases__intro{max-width:40em;font-size:min(17px,calc(17 * 100vw / 1920))}.topper-use-cases__intro--desktop{display:block}.topper-use-cases__intro--mobile{display:none}.topper-use-cases__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:min(20px,calc(20 * 100vw / 1920));align-items:start;padding-top:min(48px,2.5vw);padding-bottom:min(48px,2.5vw)}.topper-use-cases__card{border-radius:min(16px,calc(16 * 100vw / 1920));box-shadow:0 40px 40px -25px #8b7965b3}.topper-use-cases__card--1{transform:translateY(min(28px,calc(28 * 100vw / 1920)))}.topper-use-cases__card--2{transform:translateY(min(95px,calc(95 * 100vw / 1920)));box-shadow:0 40px 40px -25px #395336b3}.topper-use-cases__card--3{transform:translateY(0);box-shadow:0 40px 40px -25px #4d4c67b3}.topper-use-cases__card--4{transform:translateY(min(115px,calc(115 * 100vw / 1920)));box-shadow:0 40px 40px -25px #455360b3}.topper-use-cases__btn,.topper-use-cases__card:not(.is-open) .topper-use-cases__btn,.topper-use-cases__card.is-open .topper-use-cases__btn{display:block;max-height:none;min-height:0;padding:0;background:#d8d4ce;aspect-ratio:213 / 356}.topper-use-cases__media,.topper-use-cases__card:not(.is-open) .topper-use-cases__media,.topper-use-cases__card.is-open .topper-use-cases__media{display:block}.topper-use-cases__media--split .topper-use-cases__image--desktop{display:block}.topper-use-cases__media--split .topper-use-cases__image--mobile{display:none}.topper-use-cases__num{display:none!important}.topper-use-cases__overlay,.topper-use-cases__card:not(.is-open) .topper-use-cases__overlay,.topper-use-cases__card.is-open .topper-use-cases__overlay{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:flex-start;gap:min(16px,calc(16 * 100vw / 1920));padding:min(28px,calc(28 * 100vw / 1920)) min(20px,calc(20 * 100vw / 1920)) min(20px,calc(20 * 100vw / 1920));padding-right:min(44px,calc(44 * 100vw / 1920));background:var(--color-overlay)}.topper-use-cases__card--1{--color-overlay: linear-gradient(180deg, #916c4712, #9f745080 16%, #9f7450)}.topper-use-cases__card--2{--color-overlay: linear-gradient(180deg, rgba(35, 69, 37, 0) 0%, rgba(35, 69, 37, 1) 100%)}.topper-use-cases__card--3{--color-overlay: linear-gradient(180deg, rgba(20, 16, 69, 0) 4%, rgba(20, 16, 69, 1) 100%)}.topper-use-cases__card--4{--color-overlay: linear-gradient(180deg, rgba(52, 90, 126, 0) 0%, rgba(52, 90, 126, 1) 100%)}.topper-use-cases__title,.topper-use-cases__card:not(.is-open) .topper-use-cases__title{font-size:min(20px,calc(20 * 100vw / 1920));margin-bottom:min(30px,1.5625vw)}.topper-use-cases__rule,.topper-use-cases__card:not(.is-open) .topper-use-cases__rule{display:block;width:min(36px,1.875vw)}.topper-use-cases__text{max-height:0;margin:0;overflow:hidden;opacity:0;transform:translateY(6px);font-size:min(14px,calc(14 * 100vw / 1920));line-height:1.45;transition:max-height .4s cubic-bezier(.22,1,.36,1),opacity .4s ease,transform .4s cubic-bezier(.22,1,.36,1)}.topper-use-cases__card.is-open .topper-use-cases__text{opacity:1;transform:translateY(0)}.topper-use-cases__chevron,.topper-use-cases__card:not(.is-open) .topper-use-cases__chevron{display:block;position:absolute;right:min(20px,calc(20 * 100vw / 1920));bottom:min(22px,calc(22 * 100vw / 1920));width:10px;height:10px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-135deg);transition:transform .4s cubic-bezier(.22,1,.36,1)}.topper-use-cases__card.is-open .topper-use-cases__chevron{transform:rotate(45deg);bottom:unset;top:min(90px,4.6875vw)}}@media(prefers-reduced-motion:reduce){.topper-use-cases__btn,.topper-use-cases__text,.topper-use-cases__chevron{transition:none!important}}
/*# sourceMappingURL=/cdn/shop/t/5/assets/section-topper-use-cases.css.map */