/* ==============================================
    Name: Sale banner css
    Creact by: Dang Phuong Tay
    Creact at: 29/1/2024
    Update at: 2/2/2024
============================================== */
.home__sale--banner__container--list{
    overflow: hidden;
    width: 100%;
    transition: 1s all ease;
}
.home__sale--banner__container--list__item--wrapper{
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 2s;
}

.home__sale--banner__container--list__item:hover{
    transform: translateY(-2%);
    box-shadow: 0 0 10px grey;
}
.home__sale--banner__container--list__item{
    position: relative;
    border-radius: var(--border-radius-size-3);
    transition: all ease .1s;
    width: 370px;
}
.home__sale--banner__container--list__item--text{
    position: absolute;
    bottom: 12px;
    left: 12px;
    color: var(--color-text-6);
    background: rgba(0, 0, 0,.35);
    border-radius: 19px;
    padding: 10px 20px;
    width: 70%;
    font-weight: bold;
}
.home__sale--banner__container--list__item img{
    height: 170px;
    width: 370px;
    object-fit: cover;
    border-radius: var(--border-radius-size-3);
    max-width: none !important;
}
.home__sale--banner__container--list__item {
    width: 370px;
    
}

 @media only screen and (max-width: 1400px) {
    

 }
 @media only screen and (max-width: 1111px) {
    .home__sale--banner__container--list__item--wrapper{
        gap: 30;
    }
    .home__sale--banner__container--list{
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: scroll;
    }
    .home__sale--banner__container--list__item{
        width: 350px;
        margin-right: 30px;
    }
    .home__sale--banner__container--list__item img{
        width: 350px;
        border-radius: var(--border-radius-size-3);
     }
    
 }

 @media only screen and (max-width: 850px) {

    .home__sale--banner__container--list__item img{
        width: 370px;
        border-radius: var(--border-radius-size-3);
     }
     .home__sale--banner__container--list .home__sale--banner__container--list__item p{
        width: 370px;
     }
 }
 @media only screen and (max-width: 550px) {
    
    .home__sale--banner__container--list__item a img {
            
 }

}