.grid5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
.grid3 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
  
  .general {
    width: 100%;
    height: 100%;
  }
  
  .val1 {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
  }
  
  .val2 {
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;
  }
  
  .val3 {
    grid-column: 3 / span 1;
    grid-row: 1 / span 1;
  }
  
  .val5 {
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
  }
  
  .val6 {
    grid-column: 1 / span 1;
    grid-row: 3 / span 1;
  }
  
  .val7 {
    grid-column: 2 / span 1;
    grid-row: 2 / span 2;
  }
  
  .val8 {
    grid-column: 3 / span 1;
    grid-row: 2 / span 2;
  }
  
  .val9 {
    grid-column: 3 / span 2;
    grid-row: 4 / span 1;
  }
  /* custom */
  .r2c1 {
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
  }
  
  .r2c2 {
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;
  }
  .r2c2-span2 {
    grid-column: 2 / span 1;
    grid-row: 2 / span 2;
  }
  
  .r2c3 {
    grid-column: 3 / span 1;
    grid-row: 2 / span 1;
  }
  .r2c3-span2 {
    grid-column: 3 / span 1;
    grid-row: 2 / span 2;
  }
  .r3c1 {
    grid-column: 1 / span 1;
    grid-row: 3 / span 1;
  }
  
  .r3c2 {
    grid-column: 2 / span 1;
    grid-row: 3 / span 1;
  }
  
  .r3c3 {
    grid-column: 3 / span 1;
    grid-row: 3 / span 1;
  }
  /* col4 */
  .c4s1 {
    grid-column: 4 / span 1;
  }
  .c4s2 {
    grid-column: 4 / span 2;
  }
  .c2s2 {
    grid-column: 2 / span 2;
  }
  .r2s1 {
    grid-row: 2 / span 1;
  }
  .r3s1 {
    grid-row: 3 / span 1;
  }
  .r3s2 {
    grid-row: 3 / span 2;
  }
  .r4s1 {
    grid-row: 4 / span 1;
  }
  .r5s1 {
    grid-row: 5 / span 1;
  }
  .r5s2 {
    grid-row: 5 / span 2;
  }
  .r8s1 {
    grid-row: 8 / span 1;
  }
  .r8s2 {
    grid-row: 8 / span 2;
  }
  .r10s1 {
    grid-row: 10 / span 1;
  }
  .r10s2 {
    grid-row: 10 / span 2;
  }
  .r11s1 {
    grid-row: 11 / span 1;
  }
  .r7c3 {
    grid-row: 7 / span 1;
    grid-column: 3 / span 2;
  }
  /*  number wise */
  .c2s1 {
    grid-column: 2 / span 1;
  }
  .r1s2 {
    grid-row: 1 / span 2;
  }
  .c1s1 {
    grid-column: 1 / span 1;
  }
  .r1s1 {
    grid-row: 1 / span 1;
  }
  .c3s1 {
    grid-column: 3 / span 1;
  }
  .r6s1 {
    grid-row: 6 / span 1;
  }
  .r7s1 {
    grid-row: 7 / span 1;
  }
  .r6s2 {
    grid-row: 6 / span 2;
  }

  @media (max-width: 767px) {
    
      .grid5, .grid3 {
        display: block;    
      }
     
      .glightbox3 {
        display: block;
        margin: 8px 0;
        width: 100%;
        height: auto;
    }
    .glightbox3 img {
      width: auto;
      height: auto;
      max-height: 100%;
    }
    .glightbox-clean .gslide-desc {
      text-align: center;
    }
  }