/* Mini */
@media screen and (max-width: 640px) {
    
    #main {
        display:grid;
        grid-template-areas: 
        "header"
        "left1"
        "right1"
        "right2"
        "right3"
        "right4"
        "right5";
        gap: 10px;
    }

    #left {
        grid-area: left1;
        width: 75%;
        border: 3px solid black;
        border-radius: 10px;
        margin-left: 12.5%;
    }

    #main > img {
        border: 3px solid black;
    }

    #main > p {
        margin-top: 1%;
        margin-left: 5%;
        width: 90%;
    }

    #One {
        grid-area: right1;
        font-size: 32px;
        font-family: "Caveat", cursive;
    }

    #Two {
        grid-area: right2;
        font-size: 32px;
        font-family: "Caveat", cursive;
    }

    #Three {
        grid-area: right3;
        font-size: 32px;
        font-family: "Caveat", cursive;
    }

    #Four {
        grid-area: right4;
        font-size: 32px;
        font-family: "Caveat", cursive;
    }

    #Five {
        grid-area: right5;
        font-size: 32px;
        font-family: "Caveat", cursive;
    }

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

}

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

    #main {
        display:grid;
        grid-template-areas: 
        "header header"
        "left1 right1"
        "left1 right2"
        "left1 right3"
        "left1 right4"
        "left1 right5";
        gap: 10px;
    }

    #left {
        grid-area: left1;
        width: 100%;
        border: 3px solid black;
        border-radius: 10px;
        margin: 3%;
    }

    #main > img {
        border: 3px solid black;
    }

    #main > p {
        margin-top: 1%;
        margin-left: 5%;
        width: 90%;
    }

    #One {
        grid-area: right1;
        font-size: 32px;
        font-family: "Caveat", cursive;
    }

    #Two {
        grid-area: right2;
        font-size: 32px;
        font-family: "Caveat", cursive;
    }

    #Three {
        grid-area: right3;
        font-size: 32px;
        font-family: "Caveat", cursive;
    }

    #Four {
        grid-area: right4;
        font-size: 32px;
        font-family: "Caveat", cursive;
    }

    #Five {
        grid-area: right5;
        font-size: 32px;
        font-family: "Caveat", cursive;
    }

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

}