:root{
  --slider-radius:24px;
}

/*SLIDER*/

.slider{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:clamp(12px, 2vw, 24px);
  width:100%;
  overflow:hidden;
}

/*VIEWPORT*/

.slider-viewport{
  position:relative;
  overflow:hidden;
  background:#ddd;
  border-radius:var(--slider-radius);
  aspect-ratio:16/9;
}

/*SLIDES*/

.slides{
  display:flex;
  height:100%;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}

.slide{
  min-width:100%;
}

.slide img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/*DOTS*/

.dots{
  position:absolute;
  left:50%;
  bottom:clamp(10px, 2vw, 18px);
  transform:translateX(-50%);
  display:flex;
  gap:8px;
}

.dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ffffffa6;
  transition:0.25s ease;
}

.dot.active{
  width:22px;
  border-radius:999px;
  background:#fff;
}

/*CONTENT*/

.slide-content{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  min-height:clamp(140px, 18vw, 220px);
  padding:24px;
  padding-bottom:80px;
  background:#fff;
  border-radius:var(--slider-radius);
}

.slide-content p{
  margin:0;
  font-size:clamp(11px, 1vw, 13px);
  font-weight:400;
  color:#888;
}

.slide-content h3{
  margin:0;
  font-size:clamp(25px, 1.5vw, 32px);
  font-weight:400;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/*CONTROLS*/

.controls{
  position:absolute;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
}

.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:#000;
  color:#fff;
  cursor:pointer;
  user-select:none;
  transition:0.25s ease;
}

.btn:hover{
  transform:scale(1.05);
}

/*RESPONSIVE*/

@media (max-width:900px){
  .slider{
    grid-template-columns:1fr;
  }
}

@media (max-width:600px){
  .slide-content{
    align-items:center;
    justify-content:flex-start;
    text-align:center;
    padding:16px;
    padding-bottom:82px;
  }
  
  .slide-content h3{
    margin:0;
    font-size:clamp(22px, 1.5vw, 22px);
    font-weight:400;
    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .controls{
    bottom:24px;
  }
}