ldc-jeusselin/resources/sass/work.scss

// :root{
//     --padding: 20px;
// }

.job-video {
    width: 640px;
    max-width: 100%;
    height: 360px;
    max-height: 100%;
}

#work-page {
    .job-video {
        display: none;
    }
}

.work--head,
.milaceanous--bloc,
.work--main,
.bloc--txt,
.business,
.secteur-commercial--blocs,
.geo--bloc,
.silo,
.secteur-silos--blocs,
.logistique,
.sub-logistique,
.logistique--bloc
    {flex-direction: column;}

.work .fancybox{
    position: relative;

    /* stylelint-disable-next-line no-descending-specificity */
    &:hover div {opacity: 1;}

    /* stylelint-disable-next-line no-descending-specificity */
    div {
        position: absolute; right: 0;

        /* top: 10px; */
        bottom: 10px;
        left: 0;
        background: no-repeat center/contain url("@/images/play.png");
        opacity: 1;
        transition: opacity .5s;
    }
}

.work--head--detail{
    align-items: flex-start;
    justify-content: center;
    grid-gap: 10px;
    grid-template-areas:
        "img"
        "mov";

    img{width: 100%;}

    /* stylelint-disable-next-line no-descending-specificity */
    > div {
        min-width: 200px;
        max-width: 300px;
        flex: 1;
    }
    .detail--img{grid-area: img;}
    .detail--txt{grid-area: txt;}

    .detail--video{
        position: relative;
        height: 100%;
        grid-area: mov;
        grid-gap: 10px;
        grid-template-columns: repeat(3, 1fr);
        place-items: center center;

        /* stylelint-disable-next-line no-descending-specificity */
        div{
            display: flex;
            width: 100%;
            flex-direction: column;
            align-self: flex-start;

            a{
                align-self: center;

                img {
                    width: 100px;
                }
            }

            p {
                margin: 0;
                font-family: "Open_Sans", sans-serif;
                text-align: center;
            }

            p:first-child {
                font-weight: bold;
            }

            /* stylelint-disable-next-line selector-no-qualifying-type */
            p.function {
                font-size: 0.875rem;
                font-weight: normal;
            }
        }
    }
}

.work--main{
    background-color: $primary;
    /* stylelint-disable-next-line no-descending-specificity */
    > div:not(:last-child){margin-bottom: 20px;}
}

.milaceanous{
    justify-content: center;
    grid-gap: 20px;
    grid-template-areas:
        "t1"
        "t2"
        "t3"
        "t4"
        "t5"
        "t6"
        "t7";
    grid-template-columns: 1fr;
}

.milaceanous--bloc,
.secteur-commercial--blocs,
.silo,
.logistique--bloc{
    padding: 10px;
}

.milaceanous--bloc{
    min-width: 280px;
    height: fit-content;
    background-color: $blanc;
}
/* stylelint-disable no-descending-specificity */
.milaceanous > div:nth-child(1){grid-area: t1;}
.milaceanous > div:nth-child(2){grid-area: t2;}
.milaceanous > div:nth-child(3){grid-area: t3;}
.milaceanous > div:nth-child(4){grid-area: t4;}
.milaceanous > div:nth-child(5){grid-area: t5;}
.milaceanous > div:nth-child(6){grid-area: t6;}
.milaceanous > div:nth-child(7){grid-area: t7;}
/* stylelint-enable no-descending-specificity */

.secteur-commercial--blocs, .silo, .logistique--bloc{
    background-color: $blanc;

    &:not(:last-child){margin-bottom: 20px;}
}

.geo--bloc{
    padding-top: 20px;

    &:not(:last-child){
        margin-bottom: 20px;
    }
}

.work--main .bloc--img{
    align-items: center;

    &:not(:last-child) {padding-bottom: 10px;}

    /* stylelint-disable-next-line no-descending-specificity */
    img{
        width: 100px;
        border-radius: 50%;
    }

    .bloc--txt{
        margin-left: 10px;

        /* stylelint-disable-next-line no-descending-specificity */
        > p {margin: 0;}
        p:first-child{font-weight: bold;}

        .function{
            font-family: "Open_Sans", sans-serif;
            font-size: .875rem;
            font-weight: normal;
        }
    }
}
/* stylelint-disable-next-line no-descending-specificity */
.business, .silo, .logistique{background-color: $blanc;}

.geo--bloc:not(:first-child) {
    border-top: 1px solid;
    border-top-color: $primary;
}

// *************************
// **                     **
// *************************
//          **   **
//          **   **
//          **   **
//          **   **
//          **   **
//          **   **
//          **   **
//          *******

@media only screen and (width >=768px) {
    .work--head--detail{
        grid-template-areas:
            // "txt txt"
            "img mov";
        grid-template-columns: repeat(2, 1fr);

        > div{max-width: unset;}

        .detail--video a > div:not(:last-child){
            height: 2vw;
        }
    }

    .milaceanous{
        grid-template-areas:
            "t1 t1"
            "t2 t3"
            "t4 t3"
            "t4 t5"
            "t6 t5"
            "t6 t5"
            "t6 t7";
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
    }
    .milaceanous--bloc{max-width: 50%;}

    .logistique--bloc, .secteur-logistique--blocs .geo--bloc {
        flex-flow: row wrap;

        .paragraph-title{width: 100%;}
        .bloc--img{width: 50%;}
    }
}

// ****
// *  *
// *  *
// *  *
// *  *
// *  *
// *  *
// *  *
// *  *
// *  *
// *  *
// *  *
// *  *
// ****

@media only screen and (width >=1024px) {
    .work--head--detail{
        grid-gap: 2rem;
        grid-template-areas: "img mov";
        grid-template-columns: repeat(2, 1fr);
    }

    .milaceanous{
        align-items: flex-start;
        /* stylelint-disable declaration-block-no-redundant-longhand-properties */
        grid-template-areas:
            "t1 t4 t6"
            "t1 t4 t6"
            "t2 t4 t6"
            "t2 t5 t7"
            "t3 t5 t7"
            "t3 t5 ."
            "t3 t5 .";
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(7, 1fr);
        /* stylelint-enable declaration-block-no-redundant-longhand-properties */
    }

    .milaceanous--bloc,
    .secteur-commercial--blocs,
    .silo,
    .logistique--bloc{
        padding: 20px;
    }

    .milaceanous--bloc{
        width: 100%;
        max-width: unset;
    }

    .secteur-commercial--blocs, .secteur-silos--blocs{
        flex-direction: row;
    }

    .geo--bloc{
        position: unset;
        max-width: unset;
        // margin-bottom: 0;
        height: fit-content;
        flex: 1;
        padding-top: 0;

        &:nth-child(n){
            border-top: 0;
        }
    }

    .business .geo--bloc:nth-child(2),
    .business .geo--bloc:nth-child(3),
    .secteur-silos--blocs .geo--bloc:nth-child(2),
    .secteur-silos--blocs .geo--bloc:nth-child(3),
    .secteur-silos--blocs .geo--bloc:nth-child(5),
    .secteur-silos--blocs .geo--bloc:nth-child(7){
        padding-left: 20px;
        border-left: 1px solid #fdebc2;
    }

    .secteur-silos--blocs {
        display: grid;
        /* stylelint-disable declaration-block-no-redundant-longhand-properties */
        grid-template-areas:
            "s1 s2 s3"
            "s1 s2 s3"
            "s4 s5 s3"
            "s6 s7 .";
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, 1fr);
        .geo--bloc:nth-child(1){grid-area: s1;}
        .geo--bloc:nth-child(2){grid-area: s2;}
        .geo--bloc:nth-child(3){grid-area: s3;}
        .geo--bloc:nth-child(4){grid-area: s4;}
        .geo--bloc:nth-child(5){grid-area: s5;}
        .geo--bloc:nth-child(6){grid-area: s6;}
        .geo--bloc:nth-child(7){grid-area: s7;}
        /* stylelint-enable declaration-block-no-redundant-longhand-properties */
    }

    .secteur-logistique--blocs .geo--bloc .bloc--img{
        width: 33%;
    }
}