So I want to make it these displays more responsive with grid, so I add media queries to make them shorter but in turn their gap becomes much more bigger on the grid.

<section class="console-display">

<div class="image-container">
   <div class="contain">
   
      <img src="MINI CONSOLE/1_1920x1281_crop_center.jpg.webp" alt="">
   </div>
      <div class="head-price">
   <h2>MINI CONSOLE</h2><span>CA$348</span>
   </div>
   <p>Ideal for everyday shortcuts. Adaptable to any workflow</p>
</div>

<div class="image-container">
   <div class="contain">
   
      <img src="MINI CONSOLE/1_1920x1281_crop_center.jpg.webp" alt="">
   </div>
      <div class="head-price">
   <h2>MINI CONSOLE</h2><span>CA$348</span>
   </div>
   <p>Ideal for everyday shortcuts. Adaptable to any workflow</p>
</div>

<div class="image-container">
   <div class="contain">
   
      <img src="MINI CONSOLE/1_1920x1281_crop_center.jpg.webp" alt="">
   </div>
      <div class="head-price">
   <h2>MINI CONSOLE</h2><span>CA$348</span>
   </div>
   <p>Ideal for everyday shortcuts. Adaptable to any workflow</p>
</div>

<div class="image-container">
   <div class="contain">
   
      <img src="MINI CONSOLE/1_1920x1281_crop_center.jpg.webp" alt="">
   </div>
      <div class="head-price">
   <h2>MINI CONSOLE</h2><span>CA$348</span>
   </div>
   <p>Ideal for everyday shortcuts. Adaptable to any workflow</p>
</div>

<div class="image-container ">
   <div class="containS">
   
      <img src="MINI CONSOLE/1_1920x1281_crop_center.jpg.webp" alt="">
   </div>
      <div class="head-price">
   <h2>MINI CONSOLE</h2><span>CA$348</span>
   </div>
   <p>Ideal for everyday shortcuts. Adaptable to any workflow</p>
</div>


</section>

    .console-display{
        margin-top: 35rem;
        display: grid;
        grid-template: repeat(3, 376px) / repeat(2, 562px)  ;
        grid-row-gap: 5rem;
        grid-column-gap: 2rem;
        width: 100%;
        justify-items: center;
    box-sizing: border-box;
    justify-content: center;
    }

    .image-container:last-child,
    .image-container:last-child img{
    grid-column: 1/3;
    width:100%
    }

    .image-container img{
    height: 100%;
    width:100%;}
    /* height: 376px;
    width: 562px; */

    .image-container{
    position: relative;
    width: 562px;
    color: #1a2456;
    margin-bottom: 2rem;}

    .contain{
        width: 100%;
    }


    .image-container::after{
        font-size: 14px;
        font-weight: 500;
        content: "PRE-ORDER ";
        background-color: #ff8b68;
        padding: 2px 5px;
        position: absolute;
        right: 1px;
        top: 20px;
        color: black;
    }
    .head-price{
        display: flex;
        align-items: center;
        justify-content: space-between;
    
    }

    .head-price span{
        font-weight: 300;
        color: #1a2456;
    }



    .containS{
    height: 300px;
        width: 100%;
    }
    
    @media(max-width:1200px){

        .image-container{
            width: 480px;
    
        }

        .image-container:last-child{
            width: 1077px;
        }
    }

I don’t know how to lessen the gap, also if there is an easier approach in order to make the grid or images resize (more responsive) without using media queries please tell