* {
    box-sizing: border-box;
}

#wrapper {
    display: grid;
    grid-auto-rows: minmax(50px, auto);
    grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 175px)) minmax(0px, 1fr)
    /* gap: 10px; */
}


header {
    grid-row: 1 / 3;
    grid-column: 1 / 9;
    background: rgba(36, 0, 255, 0.33);
}


nav{
    grid-row: 3/4;
    grid-column: 1 / 9;
    background: rgba(250, 0, 0, 0.21);
    z-index: 1;

}

#hero {
    grid-row: 1 / 8;
    grid-column: 3 / 7;
    background: rgba(255, 0, 0, 0.125);
    z-index: -1;
}

   
#services {
    grid-row: 8;
    grid-column: 1 / 9;
    background: #e6e6e6;
}

#commericalImage {
    grid-row: 9 / 11;
    grid-column: 3 / 7;
    background: orange;
}

#commericalContent {
    grid-row: 11 / 9;
    grid-column: 6 / 7;
    background: purple;
}

#gap {
    grid-row: 11;
    grid-column: 1 / 9;
    background: rgb(236, 100, 100);
}

#residentialImage {
    grid-row: 12 / 14;
    grid-column: 4 / 7;
    background: green;
}

#residentialContent {
    grid-row: 12 / 14;
    grid-column: 3 / 4;
    background: blue;
}

footer{
    grid-row: 14;
    grid-column:3 / 7;
    background: rgba(0, 251, 234, 0.469);
}