.section-img-coussins{
    padding: 130px 90px 150px 100px;
}

.bg-img-coussins{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:"bg-card-1 bg-card-2";
    width: fit-content;
    column-gap: 50px;
}
.bg-img-coussins > div p{
    background-color: rgba(0, 0, 0, 0.1);
    padding: 10px 0px 10px 10px;
}
.bg-card-1, .bg-card-2{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.card-1, .card-2{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 100%;
}
.card-1:hover, .card-2:hover{
    cursor: pointer !important;
    background-color: transparent;
    transition: 0.5s;
}

.bg-card-1{
    grid-area: bg-card-1;
    background-image: url('https://res.cloudinary.com/dyfvpmg3o/image/upload/v1749220428/coussin2_wstnhh.jpg');
}
.bg-card-2{
    grid-area: bg-card-2;
    background-image: url('https://res.cloudinary.com/dyfvpmg3o/image/upload/v1749220427/coussin1_eiapua.jpg');
}

.bg-img-coussins > div{
    width: 300px;
    height: 400px;
}

.card-1, .card-2{
    background-color: rgba(0, 0, 0, 0.4);
}

/* MODAL + CAOURSEL */

.slide-img-1{
    background-image: url('https://res.cloudinary.com/dyfvpmg3o/image/upload/v1749220428/coussin2_wstnhh.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.slide-img-2{
    background-image: url('https://res.cloudinary.com/dyfvpmg3o/image/upload/v1749220427/coussin1_eiapua.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#slide1:checked ~ .carousel-track {
    transform: translateX(0%);
  }
#slide2:checked ~ .carousel-track {
    transform: translateX(-100%);
}

/* Highlight du thumbnail actif */
#slide1:checked ~ .carousel-thumbnails label[for="slide1"],
#slide2:checked ~ .carousel-thumbnails label[for="slide2"] {
  opacity: 1;
  outline: 2px solid #fff;
}

/* FIN MODAL + CAROUSEL */



/* RESPONSIVE */

@media screen and (max-width: 600px){
    .section-img-coussins{
        padding: 100px 0px 100px 0px;
    }
    .bg-img-coussins{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:"bg-card-1"
                            "bg-card-2";
        row-gap: 130px;
        width: fit-content;
        margin: 0px auto;
        
    }
}

/* FIN RESPONSIVE */
