How can i make "grid-row: span 2" be responsive?

HTML-CSS
1

Hi everyone,
how can i make grid-row: span 2 be responsive?
what i mean is, if i resize the screen to mobile, it should look something like output of col-sm-12

also, if i comment out :nth-child(4) & :last-child, the output will look exactly like col-sm-12

Please i need help :frowning:

source code


$crete: #477f2d;

.card-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 grid-auto-rows: minmax(250px, 1fr);
 grid-auto-flow: dense;
 grid-gap: 5px;
 padding: 5px;
 figure {
  margin: 0;
  // border: 2px solid grey;
  position: relative;

  img {
   position: absolute;
   height: 100%;
   width: 100%;
   // z-index: -1;
   object-fit: cover;
  }

  figcaption {
   position: absolute;
   height: 75px;
   left: 15px;
   right: 15px;
   bottom: 15px;
   background: rgba(71, 127, 45, 0.75);
   padding: 15px;
   color: white;
   overflow: hidden;
   // text-overflow: ellipsis;

   blockquote {
    height: 60px;
    overflow: hidden;
   }
  }
 }

> :nth-child(4) {
    grid-row: span 2;
  }

  > :last-child {
    grid-column: span 2;
  }

 .card-event {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-around;
  // border: 2px solid yellow;
  color: white;
  background: rgba(0, 0, 0, 0.5);

  img {
   position: absolute;
   height: 100%;
   width: 100%;
   z-index: -1;
   object-fit: cover;
  }

  .event-date {
   text-align: center;
   height: 120px;

   > :nth-child(2) {
    font-size: 2em;
    border-left: 7px solid $crete;
    border-right: 7px solid $crete;
    margin: 0;
    height: 50px;
    background: white;
    color: $crete;
   }

   > :nth-child(odd) {
    height: 28px;
    background: $crete;
   }
  }

  .event-description {
   text-align: center;

   > :nth-child(1n + 0) {
    padding: 0;
    margin: 0;
   }
  }
 }
}