Mobile First - Testimonials Grid Section

The cards do not stack on top on one another in mobile view. I found it easier to build it mobile first with 5 boxes stacked . Then do a media query with a min-width to change to grid view at larger screen size, setting columns and rows for each box in that media query

@media(min-width:1030px){
   
    main {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto auto;
        gap: 20px;
        max-width: 1100px; /* Adjust the gap size as needed */
      }
    .card{
        width: auto;
        margin-bottom: 0 ;
    }
    .box1 {
    grid-column-start: 1;
    grid-column-end: 3; 
    background-position: right 50px top; 
    }
    .box3 {
    grid-row-start: 2;
    }
    .box4{
    grid-row-start: 2;
    grid-column-start: 2;
    grid-column-end: 4;
    }
    .box5{
    grid-row-start: 1;
    grid-row-end: 3;
    }