/* ----
SPECIFICS SLIDES
---- */
#audiovisuel > div:nth-child(1) {
    grid-template-columns: auto auto;
    margin: 75px auto auto auto;
    
    transform: translateY(-50px);
}
#audiovisuel .img-card > img {
    width: 250px;
    height: 250px;
    object-fit: cover;
}
#dev-web_web-design, #communication, #univ-graph, #scenario {
    grid-gap: 0px;
}
#iot_motion-design, #real-decors, #charges-de-projet, #real-decors, #tuteur {
    grid-gap: 100px;
}



/* ----
EFFECTS
---- */

/* --- Effects with 1 img --- */
.slide-content .img-card-1:nth-child(1):hover {
    transform: scale(1.1);
}


/* --- Effects with 2 img --- */
.slide-content .img-card-2:nth-child(1) {
    transform: rotate(-5deg);
}
.slide-content .img-card-2:nth-child(2) {
    transform: rotate(10deg);
}
/* Hover */
.slide-content .img-card-2:nth-child(1):hover {
    transform: rotate(-5deg) scale(1.1);
}
.slide-content .img-card-2:nth-child(2):hover {
    transform: rotate(10deg) scale(1.1);
}


/* --- Effects with 3 img --- */
.slide-content .img-card-3:nth-child(1) {
    transform: rotate(-10deg) translate(80px, 50px);
}
.slide-content .img-card-3:nth-child(3) {
    transform: rotate(10deg) translate(-80px, 50px);
}
/* Hover */
.slide-content .img-card-3:nth-child(1):hover {
    transform: rotate(-10deg) translate(80px, 50px) scale(1.1);
}
.slide-content .img-card-3:nth-child(2):hover {
    transform: scale(1.1);
}
.slide-content .img-card-3:nth-child(3):hover {
    transform: rotate(10deg) translate(-80px, 50px) scale(1.1);
}


/* --- Effects with 4 img --- */
.slide-content .img-card-4:nth-child(1) {
    transform: rotate(-10deg) translate(80px, 0px) scale(0.8);
}
.slide-content .img-card-4:nth-child(2) {
    transform: rotate(-5deg) translate(-40px, -50px) scale(0.8);
}
.slide-content .img-card-4:nth-child(3) {
    position: absolute;
    transform: rotate(-10deg) translate(80px, 150px) scale(0.8);
}
.slide-content .img-card-4:nth-child(4) {
    position: absolute;
    transform: rotate(-5deg) translate(250px, 120px) scale(0.8);
}
/* Hover */
.slide-content .img-card-4:nth-child(1):hover {
    transform: rotate(-10deg) translate(80px, 0px) scale(1);
}
.slide-content .img-card-4:nth-child(2):hover {
    transform: rotate(-5deg) translate(-40px, -50px) scale(1);
}
.slide-content .img-card-4:nth-child(3):hover {
    transform: rotate(-10deg) translate(80px, 150px) scale(1);
}
.slide-content .img-card-4:nth-child(4):hover {
    transform: rotate(-5deg) translate(250px, 120px) scale(1);
}





/* ----
MEDIA QUERIES
---- */
@media screen and (max-width: 1200px) {
    #audiovisuel > div:nth-child(1) {
        grid-template-columns: auto auto auto auto;
        margin: auto;

        transform: translateY(80px);
    }
    #audiovisuel > div:nth-child(2) {
        max-width: 70vw;
        margin: auto;
    }

    #dev-web_web-design, #communication, #univ-graph, #scenario {
        grid-gap: 80px;
    }
    #iot_motion-design, #real-decors, #charges-de-projet, #real-decors, #tuteur {
        grid-gap: 50px;
    }
}

@media screen and (max-width: 1200px) {
    /* --- Effects with 4 img --- */
    .slide-content .img-card-4:nth-child(1) {
        transform: rotate(-10deg) translate(200px, 0px) scale(0.8);
    }
    .slide-content .img-card-4:nth-child(2) {
        transform: rotate(-5deg) translate(80px, -50px) scale(0.8);
    }
    .slide-content .img-card-4:nth-child(3) {
        position: relative;
        transform: rotate(5deg) translate(-40px, -60px) scale(0.8);
    }
    .slide-content .img-card-4:nth-child(4) {
        position: relative;
        transform: rotate(10deg) translate(-160px, 0px) scale(0.8);
    }
    /* Hover */
    .slide-content .img-card-4:nth-child(1):hover {
        transform: rotate(-10deg) translate(200px, 0px) scale(1);
    }
    .slide-content .img-card-4:nth-child(2):hover {
        transform: rotate(-5deg) translate(80px, -50px) scale(1);
    }
    .slide-content .img-card-4:nth-child(3):hover {
        position: relative;
        transform: rotate(5deg) translate(-40px, -60px) scale(1);
    }
    .slide-content .img-card-4:nth-child(4):hover {
        position: relative;
        transform: rotate(10deg) translate(-160px, 0px) scale(1);
    }
}