/* Base styles for the row container */
.row {
  display: flex;
  flex-wrap: wrap;
  /*gap: 1rem; /* Adjust spacing between columns as needed */
}

/* Column classes for extra small (default) screens */
.col-100 {
  flex: 0 0 100%;
}
.col-75 {
  flex: 0 0 75%;
}
.col-50 {
  flex: 0 0 50%;
}
.col-25 {
  flex: 0 0 25%;
}

/* Medium screens (≥768px) */
@media (min-width: 768px) {
  .col-md-100 {
    flex: 0 0 100%;
  }
  .col-md-75 {
    flex: 0 0 75%;
  }
  .col-md-50 {
    flex: 0 0 50%;
  }
  .col-md-25 {
    flex: 0 0 25%;
  }
}

/* Large screens (≥992px) */
@media (min-width: 992px) {
  .col-lg-100 {
    flex: 0 0 100%;
  }
  .col-lg-75 {
    flex: 0 0 75%;
  }
  .col-lg-50 {
    flex: 0 0 50%;
  }
  .col-lg-25 {
    flex: 0 0 25%;
  }
}

/* Extra large screens (≥1200px) */
@media (min-width: 1200px) {
  .col-xl-100 {
    flex: 0 0 100%;
  }
  .col-xl-75 {
    flex: 0 0 75%;
  }
  .col-xl-50 {
    flex: 0 0 50%;
  }
  .col-xl-25 {
    flex: 0 0 25%;
  }
}

/* Width classes */
.w-100 {
  width: 100%;
}

.w-75 {
  width: 75%;
}

.w-50 {
  width: 50%;
}

.w-25 {
  width: 25%;
}

/* Optional: Adding responsiveness for different screen sizes */
@media (min-width: 768px) {
  .w-md-100 {
    width: 100%;
  }
  .w-md-75 {
    width: 75%;
  }
  .w-md-50 {
    width: 50%;
  }
  .w-md-25 {
    width: 25%;
  }
}

@media (min-width: 992px) {
  .w-lg-100 {
    width: 100%;
  }
  .w-lg-75 {
    width: 75%;
  }
  .w-lg-50 {
    width: 50%;
  }
  .w-lg-25 {
    width: 25%;
  }
}

@media (min-width: 1200px) {
  .w-xl-100 {
    width: 100%;
  }
  .w-xl-75 {
    width: 75%;
  }
  .w-xl-50 {
    width: 50%;
  }
  .w-xl-25 {
    width: 25%;
  }
}