/*# Exercice dirigé: Media queries desktop first

Reproduire la mise en page proposée par les maquettes en commençant par la version desktop.
Les points de rupture sont : 1200px pour les tablettes et 780px pour les mobiles. */
body{
    margin:0;
}
.page {
    margin:2em;
    background-color:#fff;
}
.page header, .page footer {
    background-color:#ccc;
    padding: 1.3em;
    font-weight:bold;
    color: black;
    font-size:1.2em;
}
.page main {
    display:flex;
    flex-wrap:wrap;
    line-height:1.5em;
}
article {
    flex-basis:25%;
}

.page h3 {
    font-size: 1.9em;
    color:rgba(0,0,0,0.8);
}

/**TABLETTE**/
@media screen and (max-width:1200px) and (min-width:780px) {
    article {
        flex-basis:50%;
    }
    .page {
        margin: 0;
    }
}

/**MOBILE**/
@media screen and (max-width:780px) {
    article {
        flex-basis:100%;
    }
    .page {
        margin: 0;
    }
}