.projets {
    .liste {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        .projet {
            --hauteur-projet: 100vh;
            --hauteur-projet: 100dvh;
            height: var(--hauteur-projet);
            display: grid;

            position: relative;

            cursor: pointer;

            text-decoration: none;

            .fond {
                grid-column: 1 / 2;
                grid-row: 1 / 2;

                width: 100%;
                height: var(--hauteur-projet);

                object-fit: cover;
                object-position: center;
            }

            .dégradé {
                grid-column: 1 / 2;
                grid-row: 1 / 2;

                width: 100%;
                height: var(--hauteur-projet);

                background: linear-gradient(
                    to bottom,
                    rgba(0, 0, 0, 0) 0%,
                    rgba(0, 0, 0, 0) 70%,
                    rgba(0, 0, 0, 0.9) 100%
                );

                pointer-events: none;
            }

            .titre {
                grid-column: 1 / 2;
                grid-row: 1 / 2;

                width: 100%;
                height: var(--hauteur-projet);
                box-sizing: border-box;

                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                align-items: center;

                padding-bottom: 8rem;

                pointer-events: none;

                h2 {
                    position: relative;
                    color: white;

                    font-size: clamp(1rem, 10vw, 4rem);
                    font-size: clamp(1rem, 10dvw, 4rem);
                    text-align: center;

                    pointer-events: initial;

                    &::after {
                        content: "";
                        position: absolute;
                        left: 0;
                        bottom: -0.25rem;
                        width: 0;
                        height: 1px;
                        background-color: #fff;
                        transition: width 300ms ease-in-out;
                    }
                    &:hover::after {
                        width: 100%;
                    }
                }
            }
        }
    }
}

@media (orientation: portrait) and (max-width: 768px),
       (orientation: landscape) and (max-height: 768px) {
    .projets {
        .liste {
            .projet {
                --hauteur-projet: 50vh;
                --hauteur-projet: 50dvh;

                .titre {
                    padding-bottom: 3rem;
                }
            }
        }
    }
}