.actualites {

    .actualites-list {
        display: grid;
        grid-template-columns: subgrid;
        column-gap: calc(var(--baseline) * 4);
        row-gap: calc(var(--baseline) * 4);

        article {
            min-width: 0;
            align-self: start;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                inset: calc(-1 * var(--baseline) * 2);
                border-radius: calc(var(--unit_px) * 1);
                z-index: -1;
            }

            a {
                display: flex;
                flex-direction: column;
                gap: calc(var(--baseline) * 2);

                figure {
                    background-color: var(--rouge_cgt);
                    overflow: hidden;

                    img {
                        display: block;
                        width: 100%;
                        filter: saturate(0);
                        mix-blend-mode: screen;
                        object-fit: cover;
                        object-position: center;
                    }
                }

                .label {
                    display: flex;
                    align-items: baseline;
                    gap: calc(var(--baseline) * 2);

                    h3 { font-weight: normal; }
                    h4 { font-weight: bold; }
                }
            }
        }

        article:nth-child(4n+1),
        article:nth-child(4n)   { grid-column: span 2; }

        article:nth-child(4n+2),
        article:nth-child(4n+3) { grid-column: span 3; }

        article:hover {

            &::before {
                background-color: var(--rouge_cgt);
            }

            img {
                filter: none;
                mix-blend-mode: normal;
            }
        }
    }
}

/*-------------------------------------------------------------------------*/

@media (max-width: 1080px) {

    .actualites {
        padding-right: 0;

        .actualites-list {
            grid-template-columns: repeat(2, 1fr);

            article { padding: 0; border-radius: 0; }

            article:nth-child(4n+1),
            article:nth-child(4n),
            article:nth-child(4n+2),
            article:nth-child(4n+3) { 
                grid-column: span 1; 
            }

            figure img {
                max-height: 50vw;
            }
        }
    }
}

/*-------------------------------------------------------------------------*/

@media (max-width: 768px) {

    .actualites {

        .actualites-list {
            grid-template-columns: repeat(1, 1fr);

            figure img {
                max-height: 50vw;
            }
        }
    }
}