/* Mini */
@media screen and (max-width: 640px) {
    
    header {
        display: flex;
        justify-content: center;
        font-size: 56px;
        font-family: "Caveat", cursive;
    }

    #sub {
        display: flex;
        justify-content: center;
        font-size: 32px;
        font-family: "Caveat", cursive;
        padding: 10px;
        text-align: center;
    }

    #pics {
        display:grid;
        grid-template-areas: 
        "area1"
        "area2"
        "area3"
        "area4"
        "area5"
        "area6"
        "area7"
        "area8"
        "area9"
        "area10";
        gap: 10px;
        padding: 10px;
    }

    #pics > img {
        width: 75%;
        margin-left: 12.5%;
    }

}

/* Maxi */
@media screen and (min-width: 641px) {

    header {
        display: flex;
        justify-content: center;
        font-size: 64px;
        font-family: "Caveat", cursive;
    }

    #sub {
        display: flex;
        justify-content: center;
        font-size: 32px;
        font-family: "Caveat", cursive;
        padding: 10px;
        text-align: center;
    }

    #pics {
        display:grid;
        grid-template-areas: 
        "area1 area2 area3 area4 area5"
        "area6 area7 area8 area9 area10";
        gap: 10px;
        padding: 10px;
    }

    #pics > img {
        width: 75%;
    }

}