/* 1. Hide the actual radio buttons */
.slider-wrapper {
    max-width: 1536px; /* Your native image width */
    margin: 20px auto;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1536 / 1024; /* Locks the shape to 3:2 */
    background: #f0f0f0;
}

.slides {
    display: flex;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
}

    .slides img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensures image fills the 3:2 area without stretching */
        flex-shrink: 0;
    }

/* 2. Navigation Styling */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.4);
    color: white;
    border: none;
    padding: 1rem;
    cursor: pointer;
    font-size: 20px;
    z-index: 5;
}

.next {
    right: 0;
}

.prev {
    left: 0;
}