.documents {

    div {
        display: grid;
        grid-template-columns: subgrid;
        row-gap: 0;
        column-gap: calc(var(--baseline) * 4);
        row-gap: calc(var(--baseline) * 4);

        a {
            display: flex;
            flex-direction: column;
            align-items: center;
            align-self: start;
            position: relative;
            gap: calc(var(--baseline) * 1);

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

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

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

            h3{
                text-align: center;
                line-height: var(--hauteur-ligne_petite);
                font-size: var(--taille_typo_petite);
                font-weight: normal;
            }
        }

        a:hover {

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

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

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

@media (max-width: 1080px) {

    .documents {
        padding-right: 0;

        h1 {
            order: 2;
        }

        div{
            grid-template-columns: repeat(4, 1fr);

            a {
                padding: 0;
            }
        }
    }
}

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

@media (max-width: 768px) {

    .documents {

        div{
            grid-template-columns: repeat(2, 1fr);
        }
    }
}