@media screen and (min-width: 768px) {
.boxes-4 {
    display: grid;
    grid-template-areas:
      ". . merch1 merch1"
      ". . merch1 merch1"
      ". . . ."
      "merch2 merch2 . ."
      "merch2 merch2 . ."
      ". . . ."
      ". . merch3 merch3"
      ". . merch3 merch3"
      ". . . ."
      "merch4 merch4 . ."
      "merch4 merch4 . .";
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* Adjust the number of columns */
  }
  .boxes-3 {
    display: grid;
    grid-template-areas:
    ". merch1 merch1"
    ". merch1 merch1"
    ". . ."
    ". . ."
    "merch2 merch2 ."
    "merch2 merch2 ."
    ". . ."
    ". . ."
    ". merch3 merch3"
    ". merch3 merch3"
    ". . ."
    ". . ."
    "merch4 merch4 ."
    "merch4 merch4 .";
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .boxes-6 {
    display: grid;
    grid-template-areas:
          ". . . . merch1 merch1"
          ". . . . merch1 merch1"
          "merch2 merch2 . . . ."
          "merch2 merch2 . . . ."
          ". . . . merch3 merch3"
          ". . . . merch3 merch3"
          "merch4 merch4 . . . ."
          "merch4 merch4 . . . .";
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .boxes-4 div:nth-of-type(3).large-card,
  .boxes-4 div:nth-of-type(10).large-card,
  .boxes-4 div:nth-of-type(21).large-card,
  .boxes-4 div:nth-of-type(28).large-card {
      min-height: calc((2* calc(calc((calc(100vw - 17px) -(5* .5rem)) / 4) /(3 / 4))) + .5rem);
  }
  
  .boxes-4 div:nth-of-type(3).large-card,
  .boxes-3 div:nth-of-type(3).large-card,
  .boxes-6 div:nth-of-type(3).large-card{
      -ms-grid-row: merch1;
      grid-row: merch1;
      grid-row-start: merch1;
      grid-row-end: merch1;
      -ms-grid-column: merch1;
      grid-column: merch1;
  }
  .boxes-4 div:nth-of-type(10).large-card,
  .boxes-3 div:nth-of-type(10).large-card,
  .boxes-6 div:nth-of-type(10).large-card{
      -ms-grid-row: merch2;
      grid-row: merch2;
      -ms-grid-column: merch2;
      grid-column: merch2;
  }
}
  @media screen and (max-width: 767px) {
    .boxes-2{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .product__img.product.large-card {
      grid-column: 1 / -1;
      grid-row: span 1;
      min-height: 390px;
  }
  .product__img.product.large-card.video-small-card {
    grid-column: 2 / 2;
    grid-row: span 1;
    min-height: 100%;
}

  }