body {
    width: 1440px;
    margin: auto;
    font-family: poppins;
    font-size: 15px;
    font-weight: 400;
    box-sizing: border-box;
    background-color: hsl(0, 0%, 98%);
}

.titre {
    font-weight: 300;
}

.presentation {
    text-align: center;
    padding-top: 4%;
}

#table {
    width: 80%;
    margin: 0 auto;
    padding-top: 4%;
    display: grid;
    grid-template-columns: 30% 30% 30%;
    grid-template-rows: 1fr 1fr;
    grid-column-gap: 30px;
    justify-content: center;




}

.carte1 {
    grid-column: 1;
    grid-row: 1 / span 2;
    place-self: center;
    margin: 3%;






}


.carte2 {

    grid-column: 2;
    grid-row: 1;
    margin: 3%;


}

.carte3 {

    grid-column: 2;
    grid-row: 2;
    margin: 3%;



}

.carte4 {
    grid-column: 3;
    grid-row: 1 / span 2;
    place-self: center;
    margin: 3%;



}

.img {
    display: flex;
    justify-content: flex-end;
    padding-top: 8%;


}

.c1 {
    padding: 10%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    border-top: 0.2em solid hsl(180, 62%, 55%);
}

.c2 {
    padding: 10%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    border-top: 0.2em solid hsl(0, 78%, 62%);
}

.c3 {
    padding: 10%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    border-top: 0.2em solid hsl(34, 97%, 64%);
}

.c4 {
    padding: 10%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    border-top: 0.2em solid hsl(212, 86%, 64%);
}

@media only screen and (max-width: 775px) {
    body {
        width: 90%;
        margin: auto;
        font-size: 13px;
        justify-content: center;
        box-sizing: border-box;
    }

    .presentation {
        display: block;
        text-align: center;

    }

    #table {
        width: 80%;
        display: grid;
        grid-template-columns: 60% 60%;
        grid-template-rows: 50% 50%;
        justify-content: center;
    }

    .carte1 {
        grid-column: 1;
        grid-row: 1;
        place-self: center;
    }


    .carte2 {
        grid-column: 2;
        grid-row: 1;
        place-self: center;
    }

    .carte3 {
        grid-column: 1;
        grid-row: 2;
        place-self: center;
    }

    .carte4 {
        grid-column: 2;
        grid-row: 2;
        place-self: center;
    }

    .attribution {
        display: block;
        text-align: center;
        justify-content: end;
    }
}

@media only screen and (max-width: 575px) {
    body {
        width: 80%;
        font-size: 12px;
        justify-content: center;
    }

    .presentation {
        display: block;
        text-align: center;
        float: left;
    }

    #table {
        width: 100%;
        display: grid;
        grid-template-columns: 90%;
        grid-template-rows: 25% 25% 25% 25%;
        justify-content: center;
        float: left;
    }

    .carte1 {
        grid-column: 1;
        grid-row: 1;
        justify-self: stretch;
    }


    .carte2 {
        grid-column: 1;
        grid-row: 2;
    }

    .carte3 {
        grid-column: 1;
        grid-row: 3;
    }

    .carte4 {
        grid-column: 1;
        grid-row: 4;
    }

    .attribution {
        display: block;
        text-align: center;
        justify-content: end;
    }
}