*,
*::before,
*::after {
  box-sizing: border-box;
}
img{
    display: block; 
    width: 100%;
    min-width: 100%;
   
}
.grid{
    outline: 1px solid red;
    display: grid;
    gap: 1em;
      grid-auto-columns: 1fr; 
    grid-template-areas: 
    'one'
    'two'
    'three'
    'four'
    'five';
   }

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

.item:nth-child(1) {
  grid-area: one;
}
.item:nth-child(2) {
  grid-area: two;
}
.item:nth-child(3) {
  grid-area: three;
}
.item:nth-child(4) {
  grid-area: four;
}
.item:nth-child(5) {
  grid-area: five;
}
.item{
    padding: 2em; 
      outline: 1px solid blue;
background-color: lightblue;
display:grid;
place-items: center;
}
@media screen and (min-width: 33em) {
  .grid {
      grid-template-areas:
      "one one"
      "two three"
      "five five"
      "four four";
  }
}

@media screen and (min-width: 38em) {
  .grid {
    grid-template-areas:
     'one one'
     'two five'
     'three five'
     'four four';
  }
}

@media screen and (min-width: 54em) {
  .grid {
      grid-template-areas:
      "one one two"
      "five five five"
      "three four four";
  }
}

@media screen and (min-width: 75em) {
  .grid {
      grid-template-areas:
      "one one two five"
      "three four four five";
  }
}