d9-eql/web/themes/custom/eql/scss/pages/_toutesactualites.scss

.path-actualites{
    background-color: $background-actus;
    margin: 0;
    .block-region-content{
        display: grid;
        grid-template-columns: 1fr 8fr 1fr;
        margin: auto;
        padding-top: 3rem;

        .block-views{
            grid-column: 2;
            .view-content{
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                .views-row{
                    width: 25%;
                    flex: 0 0 25%;
                } 
                @media (max-width: 810px){
                    flex-direction: column;
                    .views-row{
                        width: 100%;
                    }
                }   
            }
            .view-display-id-block_2{
                padding-top: 0;
            }
            .node-type-actualite{
                color: $blue-dark;
                line-height: 1.5rem;
                padding: 0.5rem;
                padding-right: 1rem;
                padding-left: 1rem;
                div:first-child{                
                    display: flex;
                    flex-direction: column;
            
                    // :nth-child(1) { order: 1; } 
                    
                    // :nth-child(4) { order: 2; }  
                    // :nth-child(5) { order: 3; }    

                    // :nth-child(1) { order: 3; } 
                    // :nth-child(2) { order: 1; } 
                    // :nth-child(3) { order: 2; }  
                    // :nth-child(4) { order: 4; }    
                    a{
                        color: $blue-dark;
                    } 
                    .field--name-field-images {
                        order:1;
                        .field__item img{  
                            width: 100%; 
                            max-height: 175px;
                            object-fit: cover;
                        }
                        &::after{ 
                            display: block;
                            content:url('data:image/svg+xml,<svg width="160" height="40" xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="0" x2="80" y1="20" y2="20" stroke-linecap="cube" stroke="rgb(9,57,139)" stroke-width="5"/></svg>');
                        }
                    }
                    .field--name-field-sous-titre{
                        margin-top: 0.5rem;
                        font-size: 0.9rem;
                        font-weight: 800;
                        order: 4;
                        
                    }
                    .field--name-field-date{
                        order: 2;
                        display: flex;
                        flex-direction: row;
                        justify-content: flex-start;
                        .field__item:not(:last-of-type){ 
                            ::after{ 
                                padding-left: 1rem;
                                content: "|";
                            }

                        }
                        time{ 
                            font-size: 0.9rem;
                            font-weight: 800;
                            padding-right: 1rem;
                            width: fit-content;
                            // :not(:last-child):after{ 
                            //     padding-left: 0.5rem;
                            //     content: "|";
                            // }
                          

                        }
                    }
                    .field--name-title{
                        order: 3;

                    }

                    .field:not(.field--name-field-images){
                        width: 100%;
                    }
                    h2{ margin:0; }
                    .inline.links{
                        padding-top: none !important;
                        list-style: none;
                        width: fit-content;
                        align-self: flex-end;
                        padding-right: 1rem;
                        a{
                            display: none;
                        }
                        // a{
                        //     content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)" fill="rgb(0,158,227)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>');
                        // }
                    }
                    .field--name-field-actu-type{
                        order: 5;
                        padding-top: 1rem;
                    }
                }
            }
        }

    }
}