.grid-container {
      display: grid;
      grid-template-rows: auto auto auto auto;
      gap: 10px;
      padding: 10px;
      /* height: 100vh; */
      box-sizing: border-box;
    }

    iframe {
      width: 100%;
      /* height: 100%; */
      border: none;
      background: #ddd;
    }

    /* Row 1 → 3 equal iframes */
    .row1, .row3, .row5,.row6 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }
    .row1 .col1, .row3 .col1, .row5 .col1, .row6 .col1 {
      display: grid;
      grid-template-rows: 1fr 1fr;
      gap: 10px;
    }
    .row1 .col2,.row1 .col3,.row1 .col4, .row3 .col2, .row3 .col3, .row3 .col4 ,
    .row5 .col2, .row5 .col3, .row5 .col4, .row6 .col2, .row6 .col3, .row6 .col4 {
      display: grid;
    }

    /* Row 2 → col1(35%) with 2 small iframes stacked, col2(65%) 1 tall iframe */
    .row2 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      /* height: 25vh; */
    }
   
    /* Row 3 → 1 big iframe full width */
    /* .row3 {
       height: 20vh; 
    } */

    /* Row 4 → col1(65%) 1 tall iframe, col2(35%) 2 small stacked */
    .row4 {
      display: grid;
      grid-template-columns: 70% 30%;
      gap: 10px;
      /* height: 30vh; */
    }
  .grid-container #divider {
    text-align: center;
    margin: 20px 0;
  } 
/********************/

    /* Responsive for mobile */
    @media(max-width: 768px) {
      .row1, .row2, .row3, .row4, .row5, .row6 {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        height: auto;
      }
      .grid-container{ width: 99%;}
    }

    @media(max-width: 480px) {
      .grid-container #divider{display: none;}
      h2 span{font-size: 60px !important;}
    }