#banner-container {
    position : relative;
    padding-bottom : 240px;
}

#banner-carousel {
    box-sizing: border-box;
    left : -12px; 
    width : calc(100% + 24px);
}

#banner-sm-info-container {
    position : absolute;
    display : flex;
    flex-direction : column;

    width : calc(100% - 16px);
    height : 240px;
    background-color : white;
    left : 8px;
    bottom : 16px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
}


#banner-sm-info-container br {
    display : none;
}
#banner-sm-info-container .banner-info-title {
    display: block;
    white-space : nowrap;
}
#banner-sm-info-container .banner-info-description {
    -webkit-line-clamp: 2;
}

#banner-sm-control-container {
    width : 120px;
    margin-left : auto;
    margin-right : 16px;
    margin-bottom : 16px;
}

#banner-carousel .slide-item {
    padding : 0;
    aspect-ratio: 5/4;
    overflow: hidden;
    box-sizing : content-box;
}

#banner-control-container {
    display : none;
    position : absolute;
    z-index: 999;
    width : 120px;
    height : 40px;
    right : 24px;
    bottom : 12px;
}


#banner-container .banner-control {
    display : flex;
    flex-direction : row;
    justify-content : space-between;
    align-items : center;

    background-color : rgba(0, 0, 0, 0.4);
    border-radius : 999px;
    width : 100%;
    height : 40px;
    padding : 0 10%;
}

#banner-container  .banner-control > .carousel-control-prev,
#banner-container  .banner-control > .carousel-control-next {
    position : static;
}


#banner-container .banner-control-count-area {
    display : flex;
    color : white;
    column-gap : 4px;
    
    width : fit-content;
}

.banner {
    position : relative;
    display : flex;
    column-gap : 4px;
    width : calc(100% + 24px);
    height : 100%;
    left : -12px;
    aspect-ratio : 5/4;

    overflow : hidden;
}

.banner-inner {
    display : none;
    flex-direction : column;

    box-sizing : border-box;
    width : 36%;
    height : 100%;
    z-index : 1;
    overflow : hidden;

    row-gap : 12px;
    column-gap : 12px;

    justify-content : flex-end;

    padding-left : 32px;
    padding-top : 8%;
}

.banner-info {
    display : flex;
    flex-direction : column;
    row-gap : 12px;

    width : 100%;
    height : 100%;
    padding : 16px;
    background-color : white;

    box-sizing : border-box;
    overflow : hidden;
}

.banner-info-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  

    overflow :hidden;
    text-overflow : ellipsis;
    font-size : 1.2rem;
    font-weight : 900;
    height : fit-content;
}

.banner-info-description {
    display: -webkit-box;
    font-size : 0.75rem;
    font-weight : 600;

    width : 100%;
    overflow : hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    text-overflow : ellipsis;
}

.banner-action-area {
    display : flex;
    flex-direction : column;
}

.banner-action-area > .btn {
    position :relative;
    overflow : hidden;
    border : 0;
    font-size : 0.75rem;
}

.banner-action-area > .btn::after {
    position : absolute;
    content :  " ";
    background-color : white;
    width :100%;
    height : 100%;
    left : 0;
    top : 0;
    opacity : 0;
    transition : opacity 0.2s;
}

.banner-action-area > .btn:hover::after {
    opacity : 0.25;
}



.banner-action-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    font-size : 0.75rem;
    font-weight : 600;

    width : 100%;
    overflow : hidden;
    text-overflow : ellipsis;
}


.banner-pagination {
    display : flex;
    justify-content : center;
    align-items : center;
    column-gap : 4px;
    background-color : rgba(0, 0, 0, 0.25);
    border-radius : 100px;

    width : fit-content;
    height : 40px;
}

.banner-image {
    position : absolute;
    object-fit : fill;
    height : 100%;
    z-index : 0;
    aspect-ratio : 1700/760;
    right : -8%;
}


#banner-carousel .carousel-item.active.carousel-item > .slide-item {
    transition: filter linear 0.2s;
}


#banner-carousel .carousel-item.active > .slide-item.left,
#banner-carousel .carousel-item.active > .slide-item.right,
#banner-carousel .carousel-item.active.carousel-item-start > .slide-item:not(.left):not(.right),
#banner-carousel .carousel-item.active.carousel-item-end > .slide-item:not(.left):not(.right),
#banner-carousel .carousel-item:not(.active) > .slide-item
{
    filter: brightness(75%);
}

@media all and (min-width:576px) {
    
}
/* sm */ 


@media all and (min-width:576px) {
    .banner {
        left : 0;
        width : 100%;
    }

    /*
    #banner-carousel {
        left : -12px;
        width : calc(100% + 24px);
    }

    #banner-carousel .slide-item {
        padding : 0 12px;
        width : calc(100% - 24px);
    }*/
}

/* md */ 
@media all and (min-width:768px) {
    #banner-container {
        padding-bottom : 0;
    }

    #banner-carousel .slide-item {
        aspect-ratio : 1700/760;
    }

    /*
    #banner-carousel {
        left : -24px;
        width : calc(100% + 48px);
    }

    #banner-carousel .slide-item {
        padding : 0 24px;
        width : calc(100% - 48px);
    }*/
    
    .banner-info  {
        padding : 32px;
        padding-bottom : 12px;
    }

    .banner-image {
        right : 0;
    }
} 


/* lg */
@media all and (min-width:996px) { 
    .banner-info-title {
        font-size : 1.4rem;
    }
    
    .banner-info-description,
    .banner-action-description,
    .banner-action-area > .btn  {
        font-size : 0.825rem !important;
    }

    .banner-info-description {
        -webkit-line-clamp: 4;
    }
}

/* xl */
@media all and (min-width:1200px) { 
    

    /*
    #banner-carousel {
        left : -32px;
        width : calc(100% + 64px);
    }

    #banner-carousel .slide-item {
        padding : 0 32px;
        width : calc(100% - 64px);
    }*/

    .banner-info  {
        padding : 64px;
    }
    
    .banner-inner {
        padding-top : 5%;
    }
    .banner-info-title {
        font-size : 1.8rem;
    }
    .banner-info-description,
    .banner-action-description,
    .banner-action-area > .btn   {
        font-size : 0.94rem !important;
    }
} 

@media all and (max-width : 1399px) {
    .banner-info-title,
    .banner-info-description,
    .banner-action-description {
        color : black !important;
        text-shadow: none !important;
    }
}

/* xxl */
@media all and (min-width:1400px) { 
    .banner-info {
        background-color : transparent;
        height : 100%;
    }
    .banner-inner {
        width : 40%;
        padding-top : 4%;
    }
    .banner-info-title {
        font-size : 2rem;
    }
    .banner-info-description,
    .banner-action-description,
    .banner-action-area > .btn   {
        font-size : 1rem !important;
    }

    .banner-action-area {
        padding-top : 1rem;
    }
}