/* Grid System */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0; /* Adjust as needed */
  }
  
  /* Common Column Styles */
  [class^="col-"] {
    box-sizing: border-box;
    padding: 0 0; /* Adjust as needed */
  }
  
  /* Large Screens (col) */
  [class^="col-"] {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  
  .col-1 {
    flex-basis: 8.33333%;
  }
  
  .col-2 {
    flex-basis: 16.66667%;
  }
  
  .col-3 {
    flex-basis: 25%;
  }
  
  .col-4 {
    flex-basis: 33.33333%;
  }
  
  .col-5 {
    flex-basis: 41.66667%;
  }
  
  .col-6 {
    flex-basis: 50%;
  }
  
  .col-7 {
    flex-basis: 58.33333%;
  }
  
  .col-8 {
    flex-basis: 66.66667%;
  }
  
  .col-9 {
    flex-basis: 75%;
  }
  
  .col-10 {
    flex-basis: 83.33333%;
  }
  
  .col-11 {
    flex-basis: 91.66667%;
  }
  
  .col-12 {
    flex-basis: 100%;
  }

   /* Medium Screens (col-m) */
   @media (min-width: 1200px) {
    .col-l-1 {
      flex-basis: 8.33333%;
    }
  
    .col-l-2 {
      flex-basis: 16.66667%;
    }
  
    .col-l-3 {
      flex-basis: 25%;
    }
  
    .col-l-4 {
      flex-basis: 33.33333%;
    }
  
    .col-l-5 {
      flex-basis: 41.66667%;
    }
  
    .col-l-6 {
      flex-basis: 50%;
    }
  
    .col-l-7 {
      flex-basis: 58.33333%;
    }
  
    .col-l-8 {
      flex-basis: 66.66667%;
    }
  
    .col-l-9 {
      flex-basis: 75%;
    }
  
    .col-l-10 {
      flex-basis: 83.33333%;
    }
  
    .col-l-11 {
      flex-basis: 91.66667%;
    }
  
    .col-l-12 {
      flex-basis: 100%;
    }
  }

  
  /* Medium Screens (col-m) */
  @media (max-width: 992px) {
    .col-m-1 {
      flex-basis: 8.33333%;
    }
  
    .col-m-2 {
      flex-basis: 16.66667%;
    }
  
    .col-m-3 {
      flex-basis: 25%;
    }
  
    .col-m-4 {
      flex-basis: 33.33333%;
    }
  
    .col-m-5 {
      flex-basis: 41.66667%;
    }
  
    .col-m-6 {
      flex-basis: 50%;
    }
  
    .col-m-7 {
      flex-basis: 58.33333%;
    }
  
    .col-m-8 {
      flex-basis: 66.66667%;
    }
  
    .col-m-9 {
      flex-basis: 75%;
    }
  
    .col-m-10 {
      flex-basis: 83.33333%;
    }
  
    .col-m-11 {
      flex-basis: 91.66667%;
    }
  
    .col-m-12 {
      flex-basis: 100%;
    }
  }
  
  /* Small Screens (col-s) */
  @media (max-width: 768px) {
    .col-s-1 {
      flex-basis: 8.33333%;
    }
  
    .col-s-2 {
      flex-basis: 16.66667%;
    }
  
    .col-s-3 {
      flex-basis: 25%;
    }
  
    .col-s-4 {
      flex-basis: 33.33333%;
    }
  
    .col-s-5 {
      flex-basis: 41.66667%;
    }
  
    .col-s-6 {
      flex-basis: 50%;
    }
  
    .col-s-7 {
      flex-basis: 58.33333%;
    }
  
    .col-s-8 {
      flex-basis: 66.66667%;
    }
  
    .col-s-9 {
      flex-basis: 75%;
    }
  
    .col-s-10 {
      flex-basis: 83.33333%;
    }
  
    .col-s-11 {
      flex-basis: 91.66667%;
    }
  
    .col-s-12 {
      flex-basis: 100%;
    }
  }