.story-section{background-color:rgb(var(--color-background))}.story-section__container{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}.story-section__main-image{position:relative;aspect-ratio:4 / 5;overflow:hidden;background-color:rgba(var(--color-foreground),.05)}.story-section__image-slide{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:opacity var(--duration-extra-long, .6s) cubic-bezier(.4,0,.2,1),visibility var(--duration-extra-long, .6s) cubic-bezier(.4,0,.2,1);z-index:1}.story-section__image-slide.is-active{opacity:1;visibility:visible;z-index:2}.story-section__image{width:100%;height:100%;object-fit:cover;display:block}.story-section__placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:rgba(var(--color-foreground),.05)}.story-section__placeholder .placeholder-svg{width:50%;height:auto;fill:rgba(var(--color-foreground),.3)}.story-section__nav-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgb(var(--color-background));border:none;width:48px;height:48px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--duration-medium, .3s) ease;z-index:10;box-shadow:0 2px 12px rgba(var(--color-foreground),.15);opacity:0}.story-section__main-image:hover .story-section__nav-arrow{opacity:1}.story-section__nav-arrow--next{right:20px}.story-section__nav-arrow:hover{transform:translateY(-50%) scale(1.05);box-shadow:0 4px 16px rgba(var(--color-foreground),.2)}.story-section__nav-arrow svg{color:rgb(var(--color-foreground));width:20px;height:20px}.story-section__content{display:flex;flex-direction:column;padding:20px 0}.story-section__text-container{position:relative}.story-section__text-slide{position:absolute;top:0;left:0;width:100%;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity var(--duration-long, .5s) cubic-bezier(.4,0,.2,1),transform var(--duration-long, .5s) cubic-bezier(.4,0,.2,1),visibility var(--duration-long, .5s) cubic-bezier(.4,0,.2,1)}.story-section__text-slide.is-active{opacity:1;visibility:visible;transform:translateY(0);position:relative}.story-section__title{font-family:var(--font-body-family);font-style:var(--font-body-style);font-weight:var(--font-body-weight);font-size:1.2rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(var(--color-foreground),.6);margin:0 0 24px}.story-section__description{font-family:var(--font-body-family);font-style:var(--font-body-style);font-weight:var(--font-body-weight);font-size:1.5rem;line-height:calc(1 + .8 / var(--font-body-scale));letter-spacing:.06rem;color:rgba(var(--color-foreground),.75);max-width:520px}.story-section__description p{margin:0 0 16px}.story-section__description p:last-child{margin-bottom:0}.story-section__description strong,.story-section__description b,.story-section__description em,.story-section__description i{color:rgb(var(--color-foreground))}.story-section__description a{color:rgba(var(--color-link),var(--alpha-link));text-underline-offset:.3rem;text-decoration-thickness:.1rem;transition:text-decoration-thickness ease .1s}.story-section__description a:hover{color:rgb(var(--color-link));text-decoration-thickness:.2rem}.story-section__thumbnails{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;max-width:100%}.story-section__thumbnail{width:calc((100% - 48px)/5);min-width:60px;max-width:90px;aspect-ratio:1;padding:0;border:2px solid transparent;background:none;cursor:pointer;overflow:hidden;transition:all var(--duration-medium, .3s) cubic-bezier(.4,0,.2,1);opacity:.5}.story-section__thumbnail:hover{opacity:.75}.story-section__thumbnail.is-active{border-color:rgb(var(--color-foreground));opacity:1}.story-section__thumbnail-image{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--duration-default, .2s) ease}.story-section__thumbnail:hover .story-section__thumbnail-image{transform:scale(1.05)}.story-section__thumbnail-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:rgba(var(--color-foreground),.05)}.story-section__thumbnail-placeholder .placeholder-svg{width:60%;height:auto;fill:rgba(var(--color-foreground),.3)}@media screen and (max-width: 990px){.story-section__container{gap:40px}.story-section__thumbnail{width:calc((100% - 36px)/4);max-width:80px}}@media screen and (max-width: 749px){.story-section__container{grid-template-columns:1fr;gap:50px}.story-section__main-image{aspect-ratio:16 / 9;max-height:280px;width:100%}.story-section__nav-arrow{opacity:1;width:36px;height:36px}.story-section__nav-arrow--next{right:12px}.story-section__nav-arrow svg{width:16px;height:16px}.story-section__content{padding:0;text-align:center}.story-section__text-container{min-height:auto}.story-section__text-slide{position:relative;display:none}.story-section__text-slide.is-active{display:block}.story-section__title{margin-bottom:12px;font-size:1.1rem}.story-section__description{font-size:1.4rem;margin-left:auto;margin-right:auto}.story-section__thumbnails{gap:8px;margin-top:20px;justify-content:center}.story-section__thumbnail{width:calc((100% - 24px)/4);min-width:50px;max-width:70px}}@media screen and (max-width: 480px){.story-section__main-image{max-height:220px}.story-section__thumbnail{width:calc((100% - 18px)/4);min-width:45px;max-width:60px}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.story-section__text-slide.is-active .story-section__title{animation:fadeInUp var(--duration-long, .5s) ease .05s both}.story-section__text-slide.is-active .story-section__description{animation:fadeInUp var(--duration-long, .5s) ease .2s both}.story-section__thumbnail:focus-visible{outline:2px solid rgb(var(--color-foreground));outline-offset:2px}.story-section__nav-arrow:focus-visible{outline:2px solid rgb(var(--color-foreground));outline-offset:2px}@media (prefers-reduced-motion: reduce){.story-section__image-slide,.story-section__text-slide,.story-section__thumbnail,.story-section__thumbnail-image,.story-section__nav-arrow{transition:none}.story-section__text-slide.is-active .story-section__title,.story-section__text-slide.is-active .story-section__description{animation:none}}
/*# sourceMappingURL=/cdn/shop/t/3/assets/section-story-section.css.map */