/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! PORTFOLIO PORTRAITS !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

.parent {
    display: grid;
    grid-template-columns: 4fr repeat(2, 1fr);
    grid-template-rows: 4fr 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    height: 88vh;

    position: absolute;
    width: 100%;
    /* ? delete this ? : */
    /* transition: transform 400ms ease; */
}

.div1 {
    grid-area: 1 / 1 / 2 / 2;
    border: 1px solid #2B3035;
    /* ! for div1 children : */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap: 1px;
    grid-row-gap: 1px;
    background-color: #2B3035;
    /* padding: 5px; */
}
.fadeManual{
    animation: fadeAnimation 0.5s ease-in; 
}
@keyframes fadeAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
.carousel__img--desktop {
    object-fit: cover;
    height: 100%;
    width: 100%;
    position: absolute;
    /* par rapport à divchil qui est relative */
}

.carousel__img--desktop--adapt {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#carousel__img--desktop--adapt--escaliers, #carousel__img--desktop--adapt--door { object-position: 50% 5%; } #carousel__img--desktop--adapt--melibnw, #carousel__img--desktop--adapt--road { object-position: 50% 23%; } #carousel__img--desktop--adapt--tag { object-position: 50% 40%; } #carousel__img--desktop--adapt--ballon { object-position: 50% 63%; } #carousel__img--desktop--adapt--ombre, #carousel__img--desktop--adapt--boule, #carousel__img--desktop--adapt-light { object-position: 50% 35%; } #carousel__img--desktop--adapt--gare, #carousel__img--desktop--adapt--orange { object-position: 50% 47%; } #carousel__img--desktop--adapt--flowers, #carousel__img--desktop--adapt--trulli, #carousel__img--desktop--adapt--dog { object-position: 50% 30%; } #carousel__img--desktop--adapt--lavande { object-position: 50% 60%; }

.divchild {
    background-size: cover;
    background-position: center;
    object-position: center;
    position: relative;
    display: flex;
}
/* définit simultanément grid-row-start, grid-column-start, grid-row-end, et grid-column-end */
.divchild1 { grid-area: 1 / 3 / 3 / 5; } .divchild2 { grid-area: 1 / 5 / 4 / 7; } .divchild3 { grid-area: 1 / 1 / 4 / 3; } .divchild4 { grid-area: 3 / 3 / 6 / 5; } .divchild5 { grid-area: 4 / 5 / 6 / 7; } .divchild6 { grid-area: 4 / 1 / 6 / 3; } .divchild1-1 { grid-area: 1 / 1 / 3 / 4; } .divchild2-1 { grid-area: 1 / 4 / 3 / 7; } .divchild3-1 { grid-area: 3 / 2 / 9 / 4; } .divchild4-1 { grid-area: 3 / 4 / 9 / 6; } .divchild5-1 { grid-area: 3 / 6 / 9 / 7; } .divchild6-1 { grid-area: 3 / 1 / 9 / 2; } .divchild1-2 { grid-area: 4 / 3 / 6 / 5; } .divchild2-2 { grid-area: 1 / 5 / 3 / 7; } .divchild3-2 { grid-area: 1 / 1 / 4 / 3; } .divchild4-2 { grid-area: 1 / 3 / 4 / 5; } .divchild5-2 { grid-area: 3 / 5 / 6 / 7; } .divchild6-2 { grid-area: 4 / 1 / 6 / 3; } .divchild1-3 { grid-area: 4 / 1 / 6 / 4; } .divchild2-3 { grid-area: 1 / 5 / 4 / 7; } .divchild3-3 { grid-area: 1 / 3 / 4 / 5; } .divchild4-3 { grid-area: 1 / 1 / 3 / 3; } .divchild5-3 { grid-area: 3 / 1 / 3 / 3; } .divchild6-3 { grid-area: 4 / 4 / 6 / 7; }

.div2 {
    grid-area: 2 / 2 / 3 / 3;
    border: 1px solid #2B3035;
}

.div3 {
    grid-area: 2 / 3 / 3 / 4;
    border: 1px solid #2B3035;
}

.div4 {
    grid-area: 2 / 1 / 3 / 2;
    border: 1px solid #2B3035;
}

.div5 {
    grid-area: 1 / 2 / 2 / 4;
    border: 1px solid #2B3035;
}



/* ! adapt divchildren to mobile */
@media (max-width: 768px) {

    /* until ipad mini */
    /* .pop-up{
        top: 20%;
        width: 99vw;
    } */
    .carousel__btn--left, .carousel__btn--right {
        height: 100% !important;
        width: 90% !important;
    }

    .parent {
        /* modify rows */
        grid-template-columns: 4fr repeat(2, 1fr) !important;
        grid-template-rows: 8fr 1fr !important;
    }

    .div1 {
        /* to stack photos one below others (without specific positions) */
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        /* to reset automatic lines */
    }

    .divchild {
        grid-area: auto / auto / auto / auto;
    }
}