*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.banner-section{
    width:100%;
    max-width:1200px;
    height:400px;
    margin:20px auto;
    position:relative;
    overflow:hidden;
    border-radius:15px;
    background:#fff;
    box-shadow:0 8px 25px rgba(0,0,0,.2);
}

.banner{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;

    opacity:0;
    visibility:hidden;

    transition:opacity 3s ease-in-out;

    display:flex;
    justify-content:center;
    align-items:center;
}

.banner.active{
    opacity:1;
    visibility:visible;
    z-index:1;
}

.banner a{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:100%;
}

/* .banner img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    background:#fff;
} */

.banner img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}

/* Tablet */
@media(max-width:992px){

.banner-section{
    height:320px;
}

}

/* Mobile */
@media(max-width:768px){

    .banner-section{
        height:auto;
        aspect-ratio:3 / 1;
        border-radius:10px;
        margin:15px auto;
    }

    .banner img{
        object-fit:contain;
        background:#fff;
    }

}


/* Small Mobile */
@media(max-width:480px){

    .banner-section{
        height:auto;
        aspect-ratio:3 / 1;
        border-radius:8px;
        margin:10px auto;
    }

    .banner img{
        object-fit:contain;
    }

}