#hero{position:relative;width:100%;height:calc((var(--doc-height) * .85) - var(--header-height));color:#fff;overflow:hidden;margin-bottom:64px}#hero ul{padding-left:0;margin:0;height:calc(100% + 15px);display:flex;scroll-behavior:smooth;scroll-snap-type:x mandatory;overflow-x:auto}#hero li{background-size:cover!important;background-position:center center!important;background-blend-mode:normal,multiply,normal!important;height:100%;padding:64px 116px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;width:100vw;max-width:100vw;flex-shrink:0;position:relative;scroll-snap-align:start}#hero .foreground{position:absolute;max-width:none}#hero .foreground img{max-width:100%;max-height:100%;vertical-align:bottom}#hero .computer{bottom:0;top:6.7%;right:-101px}#hero p{margin-bottom:0}#hero p:not(.nav):not(.foreground){max-width:41vw}#hero .title{font:var(--heavy) var(--h1) var(--heading-font);letter-spacing:var(--heading-tracking)}#hero .description{margin-bottom:24px;font-size:var(--h1-description)}#hero .nav{position:absolute;top:calc(50% - 29px);left:56px;right:56px;margin-bottom:0;display:flex;justify-content:space-between}#hero .nav button{display:block;text-indent:-99999px;width:58px;height:35px;background:url(../assets/image-chevron-white.svg) no-repeat center center;padding:0;background-size:100%;transform-origin:center center}#hero .nav .prev{transform:rotate(90deg)}#hero .nav .next{transform:rotate(-90deg)}@media screen and (min-width: 2158px){#hero .computer{right:min(1%,80vw)}}@media screen and (max-width: 1750px){#hero .computer{right:-10%}}@media screen and (max-width: 1680px){#hero .computer{right:-20%}}@media screen and (max-width: 1500px){#hero li{padding:64px 96px}#hero .nav{left:32px;right:32px}#hero .computer{right:-30%}}@media screen and (max-width: 1298px){#hero .computer{top:16%;right:-34%}}@media screen and (max-width: 1150px){#hero .foreground{display:none}#hero li{align-items:center;justify-content:center}#hero p:not(.nav):not(.foreground){max-width:100%;text-align:center}#hero a{width:100%}}@media screen and (max-width: 860px){#hero .nav{left:20px;right:20px}}@media screen and (max-width: 560px){#hero li{padding:64px}#hero .nav{left:0;right:0}#hero .nav button{background-size:80%}}@media screen and (max-width: 490px){#hero .nav{left:0;right:0}#hero .nav button{background-size:50%}#hero p:not(.nav):not(.foreground){text-align:left;width:100%}}
/*# sourceMappingURL=/cdn/shop/t/7/assets/section-hero-carousel.css.map */