drupal-reha/web/themes/custom/reha/scss/pages/_actualites.scss

.page-actualites{
    .block-page-title-block{
        width: 75%;
        margin: auto;
    }
    .view-actus{
        padding-top: 3rem;
        padding-bottom: 6rem;
        width: 80%;
        margin: auto;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        @media (max-width:891px) {
            flex-direction: column;
            width: 90%;
        }
        .views-row{
            width: 28%;
            padding: 1rem;
            @media (max-width:891px) {
                width: 95%;
                margin: auto;
                padding: 0;
            }
            &:hover{
                transform: scale(1.05);
                transition: 0.3s transform ease, 0.3s box-shadow ease;   
            }
            .node-type-actualite{
                width: 30vw !important;
                @media (max-width:891px) {
                    width: 100% !important;
                    margin-bottom: 2rem;
                }
                .entete_actu{
                    flex-direction: column;
                    .image-actualite{
                        width: 90%;
                        margin: auto;
                        img{
                            width: 100%;
                            height: 15rem;
                            object-fit: cover;
                            @media(max-width:810px){
                                height: 10rem;
                            }
                        }
                    }
                    .infos-content{
                        height: fit-content;
                        width: 100%;
                        margin: auto;
                        top: -0.5rem;
                        h1{
                            display: none;
                        }
                        h2{
                            margin-left: 0;
                            padding-top: 0.2rem;
                            font-weight: 600;
                            @media(max-width:810px){
                                font-size: 1rem;
                            }
                        }
                        .field--name-field-sous-titre{
                            padding-top: 0 rem;
                            font-size: 1.2rem;
                            @media(max-width:810px){
                                font-size: 1rem;
                            }
                        }
                        .field--name-field-date{
                            padding-top: 0.2rem;
                        }
                    }
                }
            }
        }
    }
}