html{
    background:#ecb5bc !important;
}

#product ul{
    display:grid;
    justify-content: center;
}
#product ul.list1{
    grid-template-columns: minmax(auto, 410px) minmax(auto, 450px) minmax(auto, 410px);
    column-gap: 8rem;
}
#product ul.list2{
    grid-template-columns: minmax(auto, 660px) minmax(auto, 450px);
    column-gap: 10rem;
    margin-top:9rem;
}
#product ul li{
    height:fit-content;
    overflow: hidden;
    border-radius: 2rem;
    -webkit-transition:all 0.3s;
    -o-transition:all 0.3s;
    transition:all 0.3s;
}
#product ul li:hover{
    opacity: 0.8;
    -webkit-transform: skew(0.5deg, -0.5deg) scale(1.05, 1.05);
    -moz-transform: skew(0.5deg, -0.5deg) scale(1.05, 1.05);
    -o-transform: skew(0.5deg, -0.5deg) scale(1.05, 1.05);
    transform: skew(0.5deg, -0.5deg) scale(1.05, 1.05);
    -webkit-transition-duration: 1600ms;
    -o-transition-duration: 1600ms;
    transition-duration: 1600ms;
    -webkit-transition-timing-function: cubic-bezier(0, 0.52, 0.25, 1);
    -o-transition-timing-function: cubic-bezier(0, 0.52, 0.25, 1);
    transition-timing-function: cubic-bezier(0, 0.52, 0.25, 1);
    -webkit-box-shadow: 0 1.7rem 2rem rgba(230,159,168,1);
    -moz-box-shadow: 0 1.7rem 2rem rgba(230,159,168,1);
    box-shadow: 0 1.7rem 2rem rgba(230,159,168,1);
}
#product ul li img{
    display:block;
    margin:0 auto;
    width:102%;
}
#product ul li.product2{
    margin-top:12.5rem;
}
#product ul li.product3{
    margin-top:-2rem;
}
#product ul li.product4{
    margin-top:3rem;
}
#product ul li a{
    display:block;
    font-size:0;
    background:var(--color-white);
}
#product ul li .text-box{
    padding: 1.5rem 2.3rem;
    color:#7f726f;
}
#product ul li .text-box h3{
    font-size:3.5rem;
}
#product ul li .text-box p{
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    line-height: 2.14;
}

@media screen and (max-width: 1023px) {
    #product ul.list1{
        column-gap: 3rem;
    }
    #product ul.list2{
        grid-template-columns: minmax(auto, 660px) minmax(auto, 450px);
        column-gap: 3rem;
        margin-top:5rem;
    }
}

@media screen and (max-width: 767px) {
    #product ul{
        display:flex;
        flex-direction: column;
        justify-content: start;
        gap:8rem;
    }
    #product ul.list2{
        margin-top:8rem;
    }
    #product ul li.product1{
        width: 410px;
        max-width: 80%;

    }
    #product ul li.product2{
        width: 450px;
        max-width: 80%;
        margin:0 0 0 auto;
    }
    #product ul li.product3{
        width: 410px;
        max-width: 80%;
        margin:0 0 0 3.5rem;
    }
    #product ul li.product4{
        width: 660px;
        max-width: 100%;
        margin:0 auto;
    }
    #product ul li.product5{
        width: 450px;
        max-width: 80%;
        margin:0 0 0 auto;
    }
}