/*
    By: Drew Hengehold
    Modified on: 26 Mar 2025
    File: hw7-3.css
*/


body{
    margin: 0 0.5em;
}

div{
    font-size: 2em;
    font-family: sans-serif;
    border: 0.05em solid black;
    padding: 0.1em;
}

div.wrapper{
    gap: 0.15em;
    display: grid;
    grid-template-columns: 33% 33% 33%;
    grid-auto-rows: minmax(2em, auto);
    grid-template-areas:"one two two"
                        "three three four"
                        "five six four"
                        "seven seven seven";
}

div.one{
    background-color: red;
    grid-area: one;
}

div.two{
    background-color: orange;
    grid-area: two;
}

div.three{
    background-color: yellow;
    grid-area: three;
}

div.four{
    background-color: lightgreen;
    grid-area: four;
}

div.five{
    background-color: lightblue;
    grid-area: five;
}

div.six{
    background-color: lightpink;
    grid-area: six;
}

div.seven{
    background-color: beige;
    grid-area: seven;
}