main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 30px;
    justify-content: center;
    align-items: start;
    max-width: 1200px;
    margin: 30px auto;
    row-gap: 100px;

}

.f1 {
    color: #c87dd7;
    grid-column: 1;
    grid-row: 1;
    width: 90%;
    max-width: 500px;
    border: 2px solid;
    border-radius: 8px;
    border-color: #531658;
    text-align: center;
    padding: 15px;
    box-shadow: 2px 5px 30px #d400ff;

}

.f1 img {
    width: 100%;
    max-width: 250px;
    border-radius: 8px;
    margin-bottom: 30px;
}

.f2 {
    color: #c87dd7;
    grid-column: 1;
    grid-row: 2;
    width: 90%;
    max-width: 500px;
    border: 2px solid;
    border-radius: 8px;
    border-color: #531658;
    text-align: center;
    padding: 15px;
    box-shadow: 2px 5px 30px #d400ff;

}

.f2 img {
    width: 100%;
    max-width: 250px;
    border-radius: 8px;
    margin-bottom: 30px;

}

.f3 {
    color: #c87dd7;
    grid-column: 1;
    grid-row: 3;
    width: 90%;
    max-width: 500px;
    border: 2px solid;
    border-radius: 8px;
    border-color: #531658;
    text-align: center;
    padding: 15px;
    box-shadow: 2px 5px 30px #d400ff;

}

.f3 img {
    width: 100%;
    max-width: 250px;
    border-radius: 8px;
    margin-bottom: 30px;

}

.f4 {
    color: #c87dd7;
    align-self: start;
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 90%;
    max-width: 500px;
    border: 2px solid #531658;
    border-radius: 8px;
    text-align: center;
    padding: 30px 15px;
    box-shadow: 2px 5px 30px #d400ff;
    margin-top: 200px;
    padding-bottom: 30px;
}


.f4 img {
    width: 100%;
    max-width: 250px;
    border-radius: 8px;
    margin-bottom: 30px;

}

.f5 {
    color: #c87dd7;
    align-self: start;
    grid-column: 2;
    grid-row: 2 /span 2;
    width: 90%;
    max-width: 500px;
    border: 2px solid;
    border-color: #531658;
    border-radius: 8px;
    margin-top: 180px;
    text-align: center;
    padding: 15px;
    box-shadow: 2px 5px 30px #d400ff;
    padding-top: 50px;

}

.f5 img {
    width: 100%;
    max-width: 250px;
    border-radius: 8px;
    margin-bottom: 30px;

}

main div div span{
    display: block;
    color: rgb(240, 232, 232);
    font-weight: bold;
    margin-bottom: 40px auto;
    font-size: larger;
    
}
main div p{
    text-align: justify;
    max-width: 85%;
    margin: auto;
}


@media (max-width: 992px) {

    /* ON SUPPRIME LE GRID */
    main {
        display: flex;
        flex-direction: column;
        align-items: center; /* centre tous les blocs */
        gap: 30px;
        margin: 20px auto;
    }

    /* les blocs redeviennent normaux */
    .f1, .f2, .f3, .f4, .f5 {
        width: 100%;
        max-width: 500px;
        margin: 0; /* reset */
        grid-column: auto;
        grid-row: auto;
    }

    /* images responsives */
    .f1 img, .f2 img, .f3 img, .f4 img, .f5 img {
        width: 100%;
        max-width: 300px;
        margin: 0 auto 15px auto;
    }
}