/* Inner row with a max-width and centered */
    .row {
        display: grid;
        padding: 20px;
        grid-template-columns: repeat(12, 1fr); /* 12 equal columns */
        /*gap: 10px;*/ /* Space between columns */
        max-width: 1200px; /* Max width for the row */
        margin: 0 auto; /* Center the row within the section */
        position: relative;
      }
  
      /* Column styles */
      .col {
        padding: 20px;
        color: white;
      }
  
      /* Column spans */
      .col-2 {
        grid-column: span 2;
      }

      .col-3 {
        grid-column: span 3;
      }

      .col-4 {
        grid-column: span 4; /* 1/3 of the grid */
      }

      .col-5 {
        grid-column: span 5;
      }

      .col-6 {
        grid-column: span 6; /* 1/2 of the grid */
      }

      .col-7 {
        grid-column: span 7;
      }

      .col-8 {
        grid-column: span 8; /* 2/3 of the grid */
      }
  
      .col-12 {
        grid-column: span 12; /* Full width of the grid */
      }
  
      /* Responsive layout for smaller screens */

      @media (max-width: 767px) {
        .row {
          grid-template-columns: repeat(12, 1fr); /* 12 equal columns for small screens */
        }

        .col-2 {
          grid-column: span 12;
        }

        .col-3 {
          grid-column: span 12;
        }

        .col-6 {
          grid-column: span 12;
        }

        .col-7 {
          grid-column: span 12; /* Full width for smaller screens */
        }

        .col-12 {
          grid-column: span 12; /* Full width for smaller screens */
        }

      }
      @media (max-width: 767px) {
        .row {
          grid-template-columns: repeat(6, 1fr); /* 6 equal columns for small screens */
        }
  
        .col-4 {
          grid-column: span 6; /* Half width for smaller screens */
        }
  
        .col-5 {
            grid-column: span 6; /* Half width for smaller screens */
        }
  
        .col-8 {
          grid-column: span 6; /* Half width for smaller screens */
        }
      }
      /* Tablet layout */
      @media (min-width: 768px) and (max-width: 1024px) {
        .row {
          grid-template-columns: repeat(12, 1fr); /* 12 columns for tablets */
        }

        .col-2 {
          grid-column: span 2;
        }

        .col-3 {
          grid-column: span 3;
        }
  
        .col-4 {
          grid-column: span 4; /* 1/3 of the grid */
        }

        .col-5 {
            grid-column: span 5;
          }
  
        .col-6 {
          grid-column: span 6; /* 1/2 of the grid */
        }
  
        .col-7 {
            grid-column: span 7;
          }

        .col-8 {
          grid-column: span 8; /* 2/3 of the grid */
        }
  
        .col-12 {
          grid-column: span 12; /* Full width of the grid */
        }
      }
  
      /* Desktop layout */
      @media (min-width: 1025px) {
        .row {
          grid-template-columns: repeat(12, 1fr); /* 12 equal columns */
        }

        .col-2 {
          grid-column: span 2;
        }

        .col-3 {
          grid-column: span 3;
        }

        .col-4 {
          grid-column: span 4; /* 1/3 of the grid */
        }

        .col-5 {
            grid-column: span 5;
          }
  
        .col-6 {
          grid-column: span 6; /* 1/2 of the grid */
        }

        .col-7 {
            grid-column: span 7;
          }
  
        .col-8 {
          grid-column: span 8; /* 2/3 of the grid */
        }
  
        .col-12 {
          grid-column: span 12; /* Full width of the grid */
        }
      }