body {
    color: purple;
}

.wrapper {
   background-color:beige;
}

/* visuals to see what im doing */

.homegrid {
    border: 7px solid grey;
    margin: auto 3em
}

.homegrid > div {
    border: 2px solid black;
    background-color: pink;

}

/* to restrict image size until i remember to use smaller files */
img {
    max-width:100%;
    max-height:100%
}

/* GRID - MOBILE STACK */
.homegrid {
    display: grid;
    gap: 0.5em
    
}


/* GRID - DESKTOP OVERRIDE */

@media (min-width:900px) {

    .homegrid {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 1em;

}
    
    .grid-span-2xtall {
        grid-column: span 2;
        grid-row: span 3;
    
}
    
    
    
    
}















/* 



img {
    max-width:100%;
    max-height:100%
}


@media (min-width: 800px) {
    .homegrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
    border: 7px solid grey;
    margin: auto 10em
}
    */