@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Luckiest+Guy&family=Open+Sans:ital@0;1&display=swap');

body {
    margin: 0;
    padding: 0;
}

article {
    padding: 15px;
}

h1 {
    margin: 0;
    color: #fff;
    font-family: "Luckiest Guy", cursive;
    font-weight: 200;
}

section {
    padding: 30px 8%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(8, 1fr);
    gap: 8px;
    grid-auto-flow: row;
}

.b1 {
    background-color: #0d3b66;
}

.b2 {
    background-color: #006d77;
}

.b3 {
    background-color: #ef476f;
}

@media(max-width:900px) {
    section {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
}

@media (min-width:900px) {

    #p1,
    #p2,
    #p3 {
        grid-column: span 1;
    }

    #p4 {
        grid-column: 2 / span 2;
        grid-row: 2 / span 2;
    }

    #p5 {
        grid-column: 5 / span 1;
        grid-row: 2;
    }

    #p6 {
        grid-column: 4 / span 1;
        grid-row: 3;
    }

    #p7 {
        grid-column: 5 / span 1;
        grid-row: 3;
    }

    #p8 {
        grid-column: 2 / span 1;
        grid-row: 4;
    }

    #p9 {
        grid-column: 3 / span 1;
        grid-row: 4;
    }

    #p10 {
        grid-column: 4 / span 2;
        grid-row: 4 / span 2;
    }

    #p11 {
        grid-column: 2 / span 1;
        grid-row: 5;
    }

    #p12 {
        grid-column: 3 / span 1;
        grid-row: 5;
    }

    #p13 {
        grid-column: 2 / span 1;
        grid-row: 6;
    }

    #p14 {
        grid-column: 3 / span 2;
        grid-row: 6 / span 2;
    }

    #p15 {
        grid-column: 5 / span 1;
        grid-row: 6;
    }

    #p16 {
        grid-column: 6 / span 1;
        grid-row: 6;
    }

    #p17 {
        grid-column: 5 / span 1;
        grid-row: 7;
    }

    #p18 {
        grid-column: 4 / span 1;
        grid-row: 8;
    }
}