.main {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (max-width: 768px) {
  .main {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

@media (min-width: 1600px) {
  .main {
    max-width: 1600px;
  }
}

.main > * {
  max-width: 100%;
}

/* Container - responsive max-width with auto margins */
.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Desktop breakpoint (768px and up) */
@media (min-width: 768px) {
  .container {
    max-width: 1200px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Optional: larger desktop */
@media (min-width: 1200px) {
  .container {
    max-width: 1400px;
  }
}

/* Simple grid system */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* Equal-width columns (use with .col) */
.col {
  flex: 1;
  min-width: 0; /* Prevents overflow */
}

/* Specific column widths (percentage-based) */
.col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

@media (max-width: 767px) {
  .col {
    flex: 0 0 100%;
    margin-bottom: 1rem;  /* optional but good */
  }
}

/* Mobile: all columns full width by default */
@media (max-width: 767px) {
  [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  /* Override for specific columns that should stay inline on mobile */
  .col-no-stack {
    flex: 1 !important;
    max-width: none !important;
  }
}

/* Gap/spacing between columns */
.row-gap {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

.row-gap > [class*="col-"],
.row-gap > .col {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

@media (max-width: 767px) {
  .row-gap {
    margin-left: 0;
    margin-right: 0;
  }
  
  .row-gap > [class*="col-"],
  .row-gap > .col {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* Text alignment */
.text-left { text-align: left; }@media (max-width: 767px) {
  .col {
    flex: 0 0 100%;
    margin-bottom: 1rem;  /* optional but good */
  }
}
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* Responsive text alignment */
@media (min-width: 768px) {
  .text-sm-left { text-align: left; }
  .text-sm-center { text-align: center; }
  .text-sm-right { text-align: right; }
}

@media (min-width: 1024px) {
  .text-md-left { text-align: left; }
  .text-md-center { text-align: center; }
  .text-md-right { text-align: right; }
}

/* Optional: vertical alignment within rows */
.align-top { align-items: flex-start; }
.align-middle { align-items: center; }
.align-bottom { align-items: flex-end; }

/* Optional: justify content (horizontal spacing) */
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }