/*quand l'écran ets plus étroit que 1250px*/
@media (max-width: 1250px) {

    .home-page .background h1 {
        font-size: 7em;
    }

    .background-subtitle-wrapper {
        flex-direction: column;
        gap: 0;
        margin-top: 10em;
    }

    .cards-wrapper {
        width: 90lvw;
        gap: 10em;
        padding-top: 10lvh;
    }

    .card {
        padding: 4em 0;
    }

    .project {
        flex-direction: column;
        align-items: center;
        position: relative;
    }

    .project > .description {
        height: 500lvh;
        width: 90lvw;
    }

    .project > .illustration-container {
        position: absolute;
        top: 15lvh;
        left: 0;
        width: 100%;
        z-index: 10;
        height: 525lvh;

    }

    .project .illustration {
        top: 10lvh;
        margin: 0 auto;
        max-width: 90lvw;
        width: 630px;
    }

    .project .illustration::before {
        content: '';
        position: absolute;
        top: -10lvh;
        left: -10lvw;
        width: 100lvw;
        height: 50lvh;
        background: linear-gradient(180deg, var(--background-color) 90%, #00000000 100%);
        /*background: red;*/
        z-index: -30;
    }


    .project > .description > .title-wrapper {
        position: relative;
        z-index: 100;
    }

    .project > .description > .p {
        height: 100lvh;
    }

    .project > .description > .p > p {
        top: 60lvh;
    }

    .experience-page > ul {
        width: 85lvw;
        margin-right: 5lvw;
    }

    .footer-page {
        padding: 5lvw;
    }

}