.grid-container {
  margin: 2rem;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  grid-auto-rows: minmax(100px, auto);
}

.grid-product{
  box-shadow: 0 0 10px 1px rgba(0,0,0,0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
}

.grid-product .vm-product-media-container{
display: grid;
justify-content: center;
align-items: center;

}

.grid-product-1 {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  
}

.grid-product-2 {
  grid-column: 2 / 3;
  grid-row: 1/2;
  
}
.grid-product-3 {
  grid-column: 2 / 3;
  grid-row: 2/3;
  

}
.grid-product-4 {
  grid-column: 3 / 5;
  grid-row: 1/3;
  
}
.grid-product-5 {
  grid-column: 5 / 6;
  grid-row: 1/2;
  
}
.grid-product-6 {
  grid-column: 5 / 6;
  grid-row: 2/3;
  
}

.grid-product-7 {
  grid-column: 6 / 7;
  grid-row: 1/2;
  
}
.grid-product-8 {
  grid-column: 6 / 7;
  grid-row: 2/3;
  
}

@media (max-width:991px){
  .grid-container {
    margin: 2rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    grid-auto-rows: minmax(100px, auto);
  }

  .grid-product{
    box-shadow: 0 0 10px 1px rgba(0,0,0,0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
  }

  .grid-product-1 {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
   
  }
  
  .grid-product-2 {
    grid-column: 2 / 3;
    grid-row: 1/2;
   
  }
  .grid-product-3 {
    grid-column: 2 / 3;
    grid-row: 2/3;
  
  
  }
  .grid-product-4 {
    grid-column: 3 / 4;
    grid-row: 1/3;
    
  }
  .grid-product-5 {
    grid-column: 1 / 2;
    grid-row: 3/4;
   
  }
  .grid-product-6 {
    grid-column: 2 / 3;
    grid-row: 3/4;
   
  }
  
  .grid-product-7 {
    grid-column: 3 / 4;
    grid-row: 3/4;
   
  }
  .grid-product-8 {
    grid-column: 1 / 4;
    grid-row: 4/5;
   
  }
}
@media (max-width:550px){
  .grid-container {
    margin: 2rem;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
    grid-auto-rows: minmax(100px, auto);
  }

  .grid-product{
    box-shadow: 0 0 10px 1px rgba(0,0,0,0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
  }

  .grid-product-1 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
   
  }
  
  .grid-product-2 {
    grid-column: 1 / 2;
    grid-row: 2/3;
  
  }
  .grid-product-3 {
    grid-column: 1 / 2;
    grid-row: 3/4;
    
  }
  .grid-product-4 {
    grid-column: 1 / 2;
    grid-row: 4/5;
  
  }
  .grid-product-5 {
    grid-column: 1 / 2;
    grid-row: 5/6;
   
  }
  .grid-product-6 {
    grid-column: 1 / 2;
    grid-row: 6/7;
    
  }
  
  .grid-product-7 {
    grid-column: 1 / 2;
    grid-row: 7/8;
    
  }
  .grid-product-8 {
    grid-column: 1 / 2;
    grid-row: 8/9;
   
  }
}