/*général*/

.mx-text {
    margin: 0 10%;
}

main {
    text-align: center;
    background-color: var(--primary-color);
    padding-bottom: 200px;
}


h1 {
    padding: 8% 0;
}

h2 {
    margin: 8% 3%;
    text-align: left;
}

p,
main li {
    font-family: 'Open Sans', sans-serif;
    text-align: justify;
}

main img {
    width: 100%;
    margin-top: 15%;
}

main li {
    padding-bottom: 15px;
}

@media screen and (min-width: 810px) {
    main img {
        margin-top: 12%;
        width: 90%;
    }

    .mx-text {
        margin: 0 15%;
    }

    article {
        margin: 0 5%;
    }
}

@media screen and (min-width: 1050px) {
    main img {
        margin-top: 8%;
        width: 80%;
    }

    article {
        margin: 0 10%;
    }

    h2 {
        margin: 5% 3%;
    }
}