.hero-slider{position:relative;width:100%;height:100vh;min-height:560px;overflow:hidden;background:#fff;font-family:'Montserrat',Helvetica,sans-serif;color:#f4f2ee;touch-action:pan-y;user-select:none}

.hero-slider__slide{position:absolute;inset:0;opacity:0;z-index:1;transition:opacity var(--fade-duration,.5s) ease}
.hero-slider__slide.is-active{opacity:1;z-index:2}
.hero-slider__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform var(--zoom-out-duration,1.4s) linear}
.hero-slider__slide.is-active .hero-slider__img{transform:scale(var(--zoom-scale,1.1));transition:transform var(--slide-duration,7.5s) linear}

.hero-slider__overlay{position:absolute;inset:0;z-index:20;pointer-events:none;opacity:.2;background:linear-gradient(180deg,rgba(12,12,11,.55) 0%,rgba(12,12,11,0) 20%,rgba(12,12,11,0) 32%,rgba(12,12,11,.55) 58%,rgba(12,12,11,.85) 100%),linear-gradient(90deg,rgba(12,12,11,.55) 0%,rgba(12,12,11,0) 60%)}

.hero-slider__container{position:absolute;top:0;bottom:0;left:0;right:0;margin:0 auto;width:min(1330px,calc(100% - 40px));z-index:30;pointer-events:none}

.hero-slider__caption{position:absolute;left:0;bottom:120px;max-width:720px;opacity:0;transform:translateY(28px);transition:opacity var(--text-duration,.5s) ease,transform var(--text-duration,.5s) ease;pointer-events:none}
.hero-slider__caption.is-active{opacity:1;transform:translateY(0);pointer-events:auto}
.hero-slider__title{margin:0 0 16px;font-size:50px;line-height:1.15;font-weight:600;text-shadow:3px 3px 3px rgba(77,64,47,.1);text-wrap:balance}
.hero-slider__text{max-width:560px;font-size:16px;line-height:1.6;font-weight:400;text-shadow:3px 3px 3px rgba(77,64,47,.1);text-wrap:pretty}

.hero-slider__dots{position:absolute;left:0;bottom:40px;display:flex;align-items:center;gap:12px;pointer-events:auto}
.hero-slider__dot{position:relative;width:32px;height:32px;padding:0;border:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}
.hero-slider__dot::after{content:"";display:block;width:4px;height:4px;border-radius:50%;background:#fff}
.hero-slider__ring{position:absolute;inset:0;opacity:0;transform:rotate(-90deg);transition:opacity .3s ease}
.hero-slider__dot.is-active .hero-slider__ring{opacity:1}
.hero-slider__ring-track{fill:none;stroke:rgba(255,255,255,.25);stroke-width:1.5}
.hero-slider__ring-progress{fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:87.96;stroke-dashoffset:87.96}

@media (max-width:700px){
  .hero-slider__title{font-size:clamp(30px,7vw,50px)}
}