drupal-quartiersdedemain/web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss

#presentation, #home{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    padding-top: 3rem; 
    #block-quartiers-de-demain-views-block-statics-fields-block-1{
        order: 2;
        border-top: 2px solid $blue_QDD;
        padding-top: 0.3rem;
        .views-field-field-pieces-jointes{
            display: flex;
            flex-direction: row;
            &::before{
                content: url(../images/noun-arrow-download.svg);
                padding-right: 00.3rem;
            }
            .field-content{
                display: flex;
                flex-direction: column;
                font-size: 0.5rem;
                font-weight: 800;
                span{
                    font-weight: 600;
                }
            }
        }
    }
    
    .layout-content{
        grid-row: 1;
        order: 2;
        @media (max-width:500px) {
            padding-top: 50px;
        }
        .content_container{
            display: flex;
            margin-bottom: 0;
            #block-quartiers-de-demain-titredepage{
                display: none;
            }

            article.node-type-static{
                width: 100%;
    
                .field_body{
                    padding-left: 20%;
                    padding-right: 20%;
                    @media (max-width:810px) { 
                        padding-left: 13%;
                        padding-right: 13%;
                    }
                    @media (max-width:640px) { 
                        padding-left: 10%;
                        padding-right: 10%;
                    }

                    // width: 80%;
                    h2{
                        font-size: $font-medium;
                        font-weight: 600;
                        margin-bottom: 0;
                    }
                    img{
                        width: 100%;
                        height: auto;
                    }
                }
                .paragraph{
                    padding-top: 2rem;
                    padding-bottom: 2rem;
                    padding-left: 20%;
                    padding-right: 20%;
                    @media (max-width:810px) { 
                        padding-left: 13%;
                        padding-right: 13%;
                    }
                    @media (max-width:640px) { 
                        padding-left: 10%;
                        padding-right: 10%;
                    }
                }
                .field_field_textes{
                    .field_field_title{
                        text-transform: uppercase;
                        font-size: $font-big;
                        font-weight: 400;
                    }
                    #paragraph-id--1, #paragraph-id--2, #paragraph-id--6, #paragraph-id--7,  #paragraph-id--8{
                        .field_field_title{
                            color: $blue_QDD;
                        }
                    }
                    #paragraph-id--3, #paragraph-id--4{
                        .field_field_title{
                            color: $red_QDD;
                        }
                    }
                    #paragraph-id--1, #paragraph-id--2, #paragraph-id--3, #paragraph-id--4,  #paragraph-id--6, #paragraph-id--8{
                        background-color: $bleu_fond_header;
                    }
                    #paragraph-id--1, #paragraph-id--2, #paragraph-id--3, #paragraph-id--4{
                        padding-top: 1rem;
                    }
                    #paragraph-id--1, #paragraph-id--2, #paragraph-id--3{
                        padding-bottom: 1rem;
                    }

                    #paragraph-id--7, #paragraph-id--8{
                        text-align: center;
                    }
                    
                    #paragraph-id--7{
                        display: flex;
                        flex-direction: column;
                        .field_field_title{
                            width: 60%;
                            margin: auto;
                            padding-bottom: 1rem;
                        }
                        .field_field_texte div:nth-child(2){
                            display: flex;
                            flex-direction: row;
                            align-items: flex-start !important;
                            @media(max-width: 500px){
                                flex-direction: column;
                            }
                            p{
                                display: flex;
                                flex-direction: column;
                                padding-right: 30px;
                                text-align: left;
                                color: $blue_QDD;
                                width: calc(100vw / 3);
                                @media(max-width: 500px){
                                    padding-right: 0px;
                                    text-align: center;
                                    width: 100%;
                                }
                                img{
                                    width: 70%;
                                    height: auto;
                                    padding-bottom: 1rem;
                                    margin: auto;
                                    @media (max-width: 500px){
                                        width: 40%;
                                    }
                                }
                            }
                        }
                        
                    }
                    #paragraph-id--8{
                        padding-bottom: 4rem;
                        .field_field_title{
                            padding-bottom: 1rem;
                        }
                        
                        .field_field_texte div:nth-child(2){
                            display: flex;
                            flex-direction: row;
                            &.flex-start{

                                align-items: flex-start !important;
                            }
                            @media(max-width: 500px){
                                flex-direction: column;
                            }
                            p{
                                width: calc(100vw / 3);
                                padding-right: 30px;
                                text-align: left;
                                @media(max-width: 500px){
                                    padding-right: 0px;
                                    text-align: center;
                                    width: 100%;
                                }
                            }
                        }
                    }
                    p{
                        margin-bottom: 0;
                        // padding-bottom: 1.5rem;
                    }    
                    .field_field_picto{
                        height: auto;
                        float: inline-start;
                        padding-right: 0.5rem;
                        img{
                            width: 40px;
                            height: auto;
                            margin: auto;
                            @media(max-width: 891px){
                                width: 30px;
                            }
                        }
                    }
                    #paragraph-id--9{
                        img{
                            width: -moz-available;
                            width: 100%;
                            height: auto;   
                            // z-index: 100;
                            &:hover{
                                filter: brightness(75%);
                                transition: 0.2s;
                                cursor: url(../images/noun-loop-3037049.svg), auto; 
                                cursor: zoom-in;
                                cursor: -moz-zoom-in;
                                cursor: -webkit-zoom-in;
                                @media(max-width: 500px){
                                    filter: brightness(100%);
                                }
                            }
                        }

                        .zoom_in{
                            -ms-transform: scale(1.7); /* IE 9 */
                            -webkit-transform: scale(1.7); /* Safari 3-8 */
                            transform: scale(1.7);
                            max-width: 100vw;
                            overflow-x: scroll;
                            position: relative;
                            z-index: 98;
                            &:hover{
                                filter: brightness(100%);
                                transition: 0.2s;
                                overflow-x: scroll;
                                cursor: zoom-out;
                                cursor: -moz-zoom-out;
                                cursor: -webkit-zoom-out;

                            }   
                        }
                    }
                }
            }
        }
    }     
      
}       
.presentation footer{
    span.totop {
        display: inline-flex;
        width: 100vw;
        background: $bleu_fond_header;
    }
}