:root{
  --hs-transition-speed: .8s;
}

.hs-slider{
  position:relative;
  width:100%;
  height:100vh;
  min-height:480px;
  max-height:1200px;
  overflow:hidden;
}

.hs-slider__slide{
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  transition:opacity var(--hs-transition-speed) ease;
  background-size:cover;
  background-position:center;
}
.hs-slider__slide.is-active{
  opacity:1;
  visibility:visible;
  z-index:2;
}

.hs-slider__overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.35);
}

.hs-slider__content{
  position:relative;
  z-index:3;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  max-width:1100px;
  margin:0 auto;
  padding:0 40px;
  color:#fff;
  box-sizing:border-box;
}

.hs-slider__title{
  font-weight:800;
  font-size:clamp(28px, 5vw, 70px);
  line-height:1.25;
  margin:0 0 20px;
}

.hs-slider__text{
  font-weight:400;
  font-size:clamp(15px, 1.6vw, 22px);
  line-height:1.4;
  max-width:900px;
  margin:0 0 32px;
}

.hs-slider__actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.hs-slider__btn{
  display:inline-block;
  padding:16px 24px;
  border-radius:18px;
  border:2px solid #fff;
  text-decoration:none;
  font-weight:500;
  font-size:15px;
  color:#fff;
  background:transparent;
  transition:background .25s, color .25s;
  box-sizing:border-box;
}
.hs-slider__btn:hover{
  background:#fff;
  color:#5e483f;
}
.hs-slider__btn--solid{
  background:#fff;
  color:#5e483f;
  border-color:#fff;
}
.hs-slider__btn--solid:hover{
  background:transparent;
  color:#fff;
}

.hs-slider__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:4;
  background:transparent;
  border:none;
  color:#fff;
  width:44px;
  height:44px;
  cursor:pointer;
  font-size:40px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hs-slider__arrow:hover{color:rgba(255,255,255,.7);}
.hs-slider__arrow--prev{left:20px;}
.hs-slider__arrow--next{right:20px;}

.hs-slider__dots{
  position:absolute;
  z-index:4;
  left:40px;
  bottom:24px;
  display:flex;
  gap:10px;
}
.hs-slider__dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,.5);
  border:none;
  cursor:pointer;
  padding:0;
}
.hs-slider__dot.is-active{background:#fff;}

@media (prefers-reduced-motion: reduce){
  .hs-slider__slide{transition:none;}
}

@media (max-width: 768px){
  .hs-slider__content{padding:0 24px;}
  .hs-slider__arrow{display:none;}
}