*,
*::before,
*::after {
  box-sizing: border-box;
}
img{
    display: block; 
    width: 100%;
    min-width: 100%;
   
}
.grid{
    outline: 1px solid red;
    display: grid;
    gap: 1em;
   }

.item:last-child{
    background-color: red !important;
}

.item{
    padding: 2em; 
      outline: 1px solid blue;
background-color: lightblue;
display:grid;
place-items: center;
}

@media (min-width: 40em){
    .grid{
        grid-template-columns: repeat(4, 1fr);
    }
    .item:last-child{
    background-color: red !important;
    grid-column-start: 4;
    /* grid-row-start: 1;  */
     grid-row: 1 / 3
     /* grid-row-end: 3 */
     /* grid-row-end: span 2 */
      /* grid-row 1 / span 2 */

}
.col-span-2{
    grid-column: span 2;
}
}