.carousel { position:relative; overflow:hidden; height:420px; }

@media(max-width:640px){ .carousel{ height:260px; } }

.carousel-track {
    display:flex; height:100%;
    transition:transform .5s cubic-bezier(.77,0,.175,1);
}

.carousel-slide {
    min-width:100%; height:100%; display:flex;
    align-items:center; justify-content:center;
}

.carousel-content {
    text-align:center; color:#fff; padding:1.5rem;
    max-width:600px;
}

.carousel-content h2 { font-size:2.2rem; font-weight:700; margin-bottom:.75rem; }

.carousel-content p { font-size:1.1rem; margin-bottom:1.5rem; opacity:.9; }

@media(max-width:640px){
    .carousel-content h2 { font-size:1.4rem; }
    .carousel-content p { font-size:.9rem; }
}

.carousel-btn {
    position:absolute; top:50%; transform:translateY(-50%);
    background:rgba(0,0,0,.35); color:#fff; border:none;
    width:44px; height:44px; border-radius:50%;
    cursor:pointer; font-size:1.1rem; transition:var(--transition);
    display:flex; align-items:center; justify-content:center;
}

.carousel-btn:hover { background:rgba(0,0,0,.6); }

.carousel-btn.prev { left:1rem; }

.carousel-btn.next { right:1rem; }

.carousel-dots { position:absolute; bottom:1rem; left:50%;
transform:translateX(-50%); display:flex; gap:.5rem; }

.carousel-dot {
    width:10px; height:10px; border-radius:50%;
    background:rgba(255,255,255,.5); border:none; cursor:pointer;
    transition:var(--transition);
}

.carousel-dot.active { background:#fff; transform:scale(1.3); }