.banner-container{
    display: flex;
    & .banner-wrapper{
        display: flex;
        width: 100%;
        margin: 0 var(--container-space);
        border-radius: 18px;
        height: 200px;
        position: relative;
        & .banner-image{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 18px;
            opacity: 0;
            z-index: 1;
            transition: all 0.3s ease-in-out;
            pointer-events: none;
            & img{
                width: 100%;
                height: 100%;
                border-radius: 18px;
                object-fit: contain;
            }
            &.active{
                opacity: 1;
                z-index: 1;
                pointer-events: auto;
            }
        }
    }
}