/* ==========================================
   Banner
========================================== */

.banner-container{
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.banner-container .main-img{
    width: 100%;
    display: block;
    border-radius: 18px;
    object-fit: cover;
    overflow: hidden;

    /* Loading Animation */
    opacity: 0;
    transform: scale(1.03);
    transition:
        opacity .5s ease,
        transform .5s ease,
        box-shadow .3s ease;

    box-shadow:
        0 10px 30px rgba(0,0,0,.10);
}

.banner-container .main-img.loaded{
    opacity: 1;
    transform: scale(1);
}

.banner-container .main-img:hover{
    transform: scale(1.02);
    box-shadow:
        0 18px 45px rgba(0,0,0,.18);
}


/* Responsive */

@media (max-width:768px){

    .banner-container{
        gap:12px;
    }

    .banner-container .main-img{
        border-radius:14px;
    }

}