html * {
    box-sizing: border-box;
}

body {
    background-color: rgb(101, 69, 231);
    color: rgb(241, 241, 241);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 200;
}

h1 {
    font-weight: 200;
}

h2 {
    font-weight: 100;
    margin-top: 0;
}

header.main-grid {
    row-gap: 0;
}

.main-grid {
    display: grid;
    gap: 1em;
}

.col-1 {
    grid-column: 1 / -1;
}

/* @media (min-width: 600px) {
    .main-grid {
        grid-template-columns: repeat(12, minmax(0,1fr));
        gap: 1em;
    }

    .col-2-start {
        grid-column: 1 / 7;
    }

    .col-2-end {
        grid-column: 7 / -1;
    }
        
    .col-3-start {
        grid-column: 1 / 5;
    }

    .col-3-middle {
        grid-column: 5 / 9;
    }

    .col-3-end {
        grid-column: 9 / -1;
    }
} */

@media (min-width: 600px) {
    .main-grid {
        grid-template-columns: repeat(12, minmax(0,1fr));
        grid-template-areas: "works works works works works works spot spot spot spot spot spot"
                            "tang tang tang tang some some some some oooo oooo oooo oooo"
                            "wild wild wild brow brow brow tron tron tron sung sung sung"              
    }

    .col-2-start {
        grid-column: works;
    }

    .col-2-end {
        grid-column: spot;
    }

    .col-3-start {
        grid-column: tang;
    }

    .col-3-middle {
        grid-column: some;
    }

    .col-3-end {
        grid-column: oooo;
    }
}