.grid {
  --grid-gutter: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gutter);
}

.grid__cell {
  flex: 1;
  min-width: 0;
}

/* Width fractions — calc subtracts each cell's share of the gap so rows sum to 100% */
.grid__cell--width-5   { flex: 0 0 calc(5%       - var(--grid-gutter) * 0.95);    max-width: calc(5%       - var(--grid-gutter) * 0.95); }
.grid__cell--width-10  { flex: 0 0 calc(10%      - var(--grid-gutter) * 0.9);     max-width: calc(10%      - var(--grid-gutter) * 0.9); }
.grid__cell--width-15  { flex: 0 0 calc(15%      - var(--grid-gutter) * 0.85);    max-width: calc(15%      - var(--grid-gutter) * 0.85); }
.grid__cell--width-20  { flex: 0 0 calc(20%      - var(--grid-gutter) * 0.8);     max-width: calc(20%      - var(--grid-gutter) * 0.8); }
.grid__cell--width-25  { flex: 0 0 calc(25%      - var(--grid-gutter) * 0.75);    max-width: calc(25%      - var(--grid-gutter) * 0.75); }
.grid__cell--width-30  { flex: 0 0 calc(30%      - var(--grid-gutter) * 0.7);     max-width: calc(30%      - var(--grid-gutter) * 0.7); }
.grid__cell--width-33  { flex: 0 0 calc(33.333%  - var(--grid-gutter) * 0.66667); max-width: calc(33.333%  - var(--grid-gutter) * 0.66667); }
.grid__cell--width-35  { flex: 0 0 calc(35%      - var(--grid-gutter) * 0.65);    max-width: calc(35%      - var(--grid-gutter) * 0.65); }
.grid__cell--width-40  { flex: 0 0 calc(40%      - var(--grid-gutter) * 0.6);     max-width: calc(40%      - var(--grid-gutter) * 0.6); }
.grid__cell--width-45  { flex: 0 0 calc(45%      - var(--grid-gutter) * 0.55);    max-width: calc(45%      - var(--grid-gutter) * 0.55); }
.grid__cell--width-50  { flex: 0 0 calc(50%      - var(--grid-gutter) * 0.5);     max-width: calc(50%      - var(--grid-gutter) * 0.5); }
.grid__cell--width-55  { flex: 0 0 calc(55%      - var(--grid-gutter) * 0.45);    max-width: calc(55%      - var(--grid-gutter) * 0.45); }
.grid__cell--width-60  { flex: 0 0 calc(60%      - var(--grid-gutter) * 0.4);     max-width: calc(60%      - var(--grid-gutter) * 0.4); }
.grid__cell--width-65  { flex: 0 0 calc(65%      - var(--grid-gutter) * 0.35);    max-width: calc(65%      - var(--grid-gutter) * 0.35); }
.grid__cell--width-66  { flex: 0 0 calc(66.666%  - var(--grid-gutter) * 0.33334); max-width: calc(66.666%  - var(--grid-gutter) * 0.33334); }
.grid__cell--width-70  { flex: 0 0 calc(70%      - var(--grid-gutter) * 0.3);     max-width: calc(70%      - var(--grid-gutter) * 0.3); }
.grid__cell--width-75  { flex: 0 0 calc(75%      - var(--grid-gutter) * 0.25);    max-width: calc(75%      - var(--grid-gutter) * 0.25); }
.grid__cell--width-80  { flex: 0 0 calc(80%      - var(--grid-gutter) * 0.2);     max-width: calc(80%      - var(--grid-gutter) * 0.2); }
.grid__cell--width-85  { flex: 0 0 calc(85%      - var(--grid-gutter) * 0.15);    max-width: calc(85%      - var(--grid-gutter) * 0.15); }
.grid__cell--width-90  { flex: 0 0 calc(90%      - var(--grid-gutter) * 0.1);     max-width: calc(90%      - var(--grid-gutter) * 0.1); }
.grid__cell--width-95  { flex: 0 0 calc(95%      - var(--grid-gutter) * 0.05);    max-width: calc(95%      - var(--grid-gutter) * 0.05); }
.grid__cell--width-100 { flex: 0 0 100%; max-width: 100%; }

/* Gutter modifier */
.grid--no-gutter { --grid-gutter: 0rem; }

/* Full-width all cells */
.grid--full > .grid__cell { flex: 0 0 100%; max-width: 100%; }

/* Vertical alignment */
.grid--top    { align-items: flex-start; }
.grid--center { align-items: center; }
.grid--bottom { align-items: flex-end; }

.grid__cell--top    { align-self: flex-start; }
.grid__cell--center { align-self: center; }
.grid__cell--bottom { align-self: flex-end; }

/* Horizontal alignment */
.grid--halign-center { justify-content: center; }
.grid--halign-right  { justify-content: flex-end; }

/* Per-cell */
.grid__cell--width-fixed { flex: none; }

/* Responsive: -sm ≥ 576px */
@media (min-width: 576px) {
  .grid__cell--width-5-sm   { flex: 0 0 calc(5%       - var(--grid-gutter) * 0.95);    max-width: calc(5%       - var(--grid-gutter) * 0.95); }
  .grid__cell--width-10-sm  { flex: 0 0 calc(10%      - var(--grid-gutter) * 0.9);     max-width: calc(10%      - var(--grid-gutter) * 0.9); }
  .grid__cell--width-15-sm  { flex: 0 0 calc(15%      - var(--grid-gutter) * 0.85);    max-width: calc(15%      - var(--grid-gutter) * 0.85); }
  .grid__cell--width-20-sm  { flex: 0 0 calc(20%      - var(--grid-gutter) * 0.8);     max-width: calc(20%      - var(--grid-gutter) * 0.8); }
  .grid__cell--width-25-sm  { flex: 0 0 calc(25%      - var(--grid-gutter) * 0.75);    max-width: calc(25%      - var(--grid-gutter) * 0.75); }
  .grid__cell--width-30-sm  { flex: 0 0 calc(30%      - var(--grid-gutter) * 0.7);     max-width: calc(30%      - var(--grid-gutter) * 0.7); }
  .grid__cell--width-33-sm  { flex: 0 0 calc(33.333%  - var(--grid-gutter) * 0.66667); max-width: calc(33.333%  - var(--grid-gutter) * 0.66667); }
  .grid__cell--width-35-sm  { flex: 0 0 calc(35%      - var(--grid-gutter) * 0.65);    max-width: calc(35%      - var(--grid-gutter) * 0.65); }
  .grid__cell--width-40-sm  { flex: 0 0 calc(40%      - var(--grid-gutter) * 0.6);     max-width: calc(40%      - var(--grid-gutter) * 0.6); }
  .grid__cell--width-45-sm  { flex: 0 0 calc(45%      - var(--grid-gutter) * 0.55);    max-width: calc(45%      - var(--grid-gutter) * 0.55); }
  .grid__cell--width-50-sm  { flex: 0 0 calc(50%      - var(--grid-gutter) * 0.5);     max-width: calc(50%      - var(--grid-gutter) * 0.5); }
  .grid__cell--width-55-sm  { flex: 0 0 calc(55%      - var(--grid-gutter) * 0.45);    max-width: calc(55%      - var(--grid-gutter) * 0.45); }
  .grid__cell--width-60-sm  { flex: 0 0 calc(60%      - var(--grid-gutter) * 0.4);     max-width: calc(60%      - var(--grid-gutter) * 0.4); }
  .grid__cell--width-65-sm  { flex: 0 0 calc(65%      - var(--grid-gutter) * 0.35);    max-width: calc(65%      - var(--grid-gutter) * 0.35); }
  .grid__cell--width-66-sm  { flex: 0 0 calc(66.666%  - var(--grid-gutter) * 0.33334); max-width: calc(66.666%  - var(--grid-gutter) * 0.33334); }
  .grid__cell--width-70-sm  { flex: 0 0 calc(70%      - var(--grid-gutter) * 0.3);     max-width: calc(70%      - var(--grid-gutter) * 0.3); }
  .grid__cell--width-75-sm  { flex: 0 0 calc(75%      - var(--grid-gutter) * 0.25);    max-width: calc(75%      - var(--grid-gutter) * 0.25); }
  .grid__cell--width-80-sm  { flex: 0 0 calc(80%      - var(--grid-gutter) * 0.2);     max-width: calc(80%      - var(--grid-gutter) * 0.2); }
  .grid__cell--width-85-sm  { flex: 0 0 calc(85%      - var(--grid-gutter) * 0.15);    max-width: calc(85%      - var(--grid-gutter) * 0.15); }
  .grid__cell--width-90-sm  { flex: 0 0 calc(90%      - var(--grid-gutter) * 0.1);     max-width: calc(90%      - var(--grid-gutter) * 0.1); }
  .grid__cell--width-95-sm  { flex: 0 0 calc(95%      - var(--grid-gutter) * 0.05);    max-width: calc(95%      - var(--grid-gutter) * 0.05); }
  .grid__cell--width-100-sm { flex: 0 0 100%; max-width: 100%; }
  .grid__cell--width-auto-sm { flex: 1; max-width: none; }
}

/* Responsive: -md ≥ 768px */
@media (min-width: 768px) {
  .grid__cell--width-5-md   { flex: 0 0 calc(5%       - var(--grid-gutter) * 0.95);    max-width: calc(5%       - var(--grid-gutter) * 0.95); }
  .grid__cell--width-10-md  { flex: 0 0 calc(10%      - var(--grid-gutter) * 0.9);     max-width: calc(10%      - var(--grid-gutter) * 0.9); }
  .grid__cell--width-15-md  { flex: 0 0 calc(15%      - var(--grid-gutter) * 0.85);    max-width: calc(15%      - var(--grid-gutter) * 0.85); }
  .grid__cell--width-20-md  { flex: 0 0 calc(20%      - var(--grid-gutter) * 0.8);     max-width: calc(20%      - var(--grid-gutter) * 0.8); }
  .grid__cell--width-25-md  { flex: 0 0 calc(25%      - var(--grid-gutter) * 0.75);    max-width: calc(25%      - var(--grid-gutter) * 0.75); }
  .grid__cell--width-30-md  { flex: 0 0 calc(30%      - var(--grid-gutter) * 0.7);     max-width: calc(30%      - var(--grid-gutter) * 0.7); }
  .grid__cell--width-33-md  { flex: 0 0 calc(33.333%  - var(--grid-gutter) * 0.66667); max-width: calc(33.333%  - var(--grid-gutter) * 0.66667); }
  .grid__cell--width-35-md  { flex: 0 0 calc(35%      - var(--grid-gutter) * 0.65);    max-width: calc(35%      - var(--grid-gutter) * 0.65); }
  .grid__cell--width-40-md  { flex: 0 0 calc(40%      - var(--grid-gutter) * 0.6);     max-width: calc(40%      - var(--grid-gutter) * 0.6); }
  .grid__cell--width-45-md  { flex: 0 0 calc(45%      - var(--grid-gutter) * 0.55);    max-width: calc(45%      - var(--grid-gutter) * 0.55); }
  .grid__cell--width-50-md  { flex: 0 0 calc(50%      - var(--grid-gutter) * 0.5);     max-width: calc(50%      - var(--grid-gutter) * 0.5); }
  .grid__cell--width-55-md  { flex: 0 0 calc(55%      - var(--grid-gutter) * 0.45);    max-width: calc(55%      - var(--grid-gutter) * 0.45); }
  .grid__cell--width-60-md  { flex: 0 0 calc(60%      - var(--grid-gutter) * 0.4);     max-width: calc(60%      - var(--grid-gutter) * 0.4); }
  .grid__cell--width-65-md  { flex: 0 0 calc(65%      - var(--grid-gutter) * 0.35);    max-width: calc(65%      - var(--grid-gutter) * 0.35); }
  .grid__cell--width-66-md  { flex: 0 0 calc(66.666%  - var(--grid-gutter) * 0.33334); max-width: calc(66.666%  - var(--grid-gutter) * 0.33334); }
  .grid__cell--width-70-md  { flex: 0 0 calc(70%      - var(--grid-gutter) * 0.3);     max-width: calc(70%      - var(--grid-gutter) * 0.3); }
  .grid__cell--width-75-md  { flex: 0 0 calc(75%      - var(--grid-gutter) * 0.25);    max-width: calc(75%      - var(--grid-gutter) * 0.25); }
  .grid__cell--width-80-md  { flex: 0 0 calc(80%      - var(--grid-gutter) * 0.2);     max-width: calc(80%      - var(--grid-gutter) * 0.2); }
  .grid__cell--width-85-md  { flex: 0 0 calc(85%      - var(--grid-gutter) * 0.15);    max-width: calc(85%      - var(--grid-gutter) * 0.15); }
  .grid__cell--width-90-md  { flex: 0 0 calc(90%      - var(--grid-gutter) * 0.1);     max-width: calc(90%      - var(--grid-gutter) * 0.1); }
  .grid__cell--width-95-md  { flex: 0 0 calc(95%      - var(--grid-gutter) * 0.05);    max-width: calc(95%      - var(--grid-gutter) * 0.05); }
  .grid__cell--width-100-md { flex: 0 0 100%; max-width: 100%; }
  .grid__cell--width-auto-md { flex: 1; max-width: none; }
}

/* Responsive: -lg ≥ 1024px */
@media (min-width: 1024px) {
  .grid__cell--width-5-lg   { flex: 0 0 calc(5%       - var(--grid-gutter) * 0.95);    max-width: calc(5%       - var(--grid-gutter) * 0.95); }
  .grid__cell--width-10-lg  { flex: 0 0 calc(10%      - var(--grid-gutter) * 0.9);     max-width: calc(10%      - var(--grid-gutter) * 0.9); }
  .grid__cell--width-15-lg  { flex: 0 0 calc(15%      - var(--grid-gutter) * 0.85);    max-width: calc(15%      - var(--grid-gutter) * 0.85); }
  .grid__cell--width-20-lg  { flex: 0 0 calc(20%      - var(--grid-gutter) * 0.8);     max-width: calc(20%      - var(--grid-gutter) * 0.8); }
  .grid__cell--width-25-lg  { flex: 0 0 calc(25%      - var(--grid-gutter) * 0.75);    max-width: calc(25%      - var(--grid-gutter) * 0.75); }
  .grid__cell--width-30-lg  { flex: 0 0 calc(30%      - var(--grid-gutter) * 0.7);     max-width: calc(30%      - var(--grid-gutter) * 0.7); }
  .grid__cell--width-33-lg  { flex: 0 0 calc(33.333%  - var(--grid-gutter) * 0.66667); max-width: calc(33.333%  - var(--grid-gutter) * 0.66667); }
  .grid__cell--width-35-lg  { flex: 0 0 calc(35%      - var(--grid-gutter) * 0.65);    max-width: calc(35%      - var(--grid-gutter) * 0.65); }
  .grid__cell--width-40-lg  { flex: 0 0 calc(40%      - var(--grid-gutter) * 0.6);     max-width: calc(40%      - var(--grid-gutter) * 0.6); }
  .grid__cell--width-45-lg  { flex: 0 0 calc(45%      - var(--grid-gutter) * 0.55);    max-width: calc(45%      - var(--grid-gutter) * 0.55); }
  .grid__cell--width-50-lg  { flex: 0 0 calc(50%      - var(--grid-gutter) * 0.5);     max-width: calc(50%      - var(--grid-gutter) * 0.5); }
  .grid__cell--width-55-lg  { flex: 0 0 calc(55%      - var(--grid-gutter) * 0.45);    max-width: calc(55%      - var(--grid-gutter) * 0.45); }
  .grid__cell--width-60-lg  { flex: 0 0 calc(60%      - var(--grid-gutter) * 0.4);     max-width: calc(60%      - var(--grid-gutter) * 0.4); }
  .grid__cell--width-65-lg  { flex: 0 0 calc(65%      - var(--grid-gutter) * 0.35);    max-width: calc(65%      - var(--grid-gutter) * 0.35); }
  .grid__cell--width-66-lg  { flex: 0 0 calc(66.666%  - var(--grid-gutter) * 0.33334); max-width: calc(66.666%  - var(--grid-gutter) * 0.33334); }
  .grid__cell--width-70-lg  { flex: 0 0 calc(70%      - var(--grid-gutter) * 0.3);     max-width: calc(70%      - var(--grid-gutter) * 0.3); }
  .grid__cell--width-75-lg  { flex: 0 0 calc(75%      - var(--grid-gutter) * 0.25);    max-width: calc(75%      - var(--grid-gutter) * 0.25); }
  .grid__cell--width-80-lg  { flex: 0 0 calc(80%      - var(--grid-gutter) * 0.2);     max-width: calc(80%      - var(--grid-gutter) * 0.2); }
  .grid__cell--width-85-lg  { flex: 0 0 calc(85%      - var(--grid-gutter) * 0.15);    max-width: calc(85%      - var(--grid-gutter) * 0.15); }
  .grid__cell--width-90-lg  { flex: 0 0 calc(90%      - var(--grid-gutter) * 0.1);     max-width: calc(90%      - var(--grid-gutter) * 0.1); }
  .grid__cell--width-95-lg  { flex: 0 0 calc(95%      - var(--grid-gutter) * 0.05);    max-width: calc(95%      - var(--grid-gutter) * 0.05); }
  .grid__cell--width-100-lg { flex: 0 0 100%; max-width: 100%; }
  .grid__cell--width-auto-lg { flex: 1; max-width: none; }
}

/* Responsive: -xl ≥ 1280px */
@media (min-width: 1280px) {
  .grid__cell--width-5-xl   { flex: 0 0 calc(5%       - var(--grid-gutter) * 0.95);    max-width: calc(5%       - var(--grid-gutter) * 0.95); }
  .grid__cell--width-10-xl  { flex: 0 0 calc(10%      - var(--grid-gutter) * 0.9);     max-width: calc(10%      - var(--grid-gutter) * 0.9); }
  .grid__cell--width-15-xl  { flex: 0 0 calc(15%      - var(--grid-gutter) * 0.85);    max-width: calc(15%      - var(--grid-gutter) * 0.85); }
  .grid__cell--width-20-xl  { flex: 0 0 calc(20%      - var(--grid-gutter) * 0.8);     max-width: calc(20%      - var(--grid-gutter) * 0.8); }
  .grid__cell--width-25-xl  { flex: 0 0 calc(25%      - var(--grid-gutter) * 0.75);    max-width: calc(25%      - var(--grid-gutter) * 0.75); }
  .grid__cell--width-30-xl  { flex: 0 0 calc(30%      - var(--grid-gutter) * 0.7);     max-width: calc(30%      - var(--grid-gutter) * 0.7); }
  .grid__cell--width-33-xl  { flex: 0 0 calc(33.333%  - var(--grid-gutter) * 0.66667); max-width: calc(33.333%  - var(--grid-gutter) * 0.66667); }
  .grid__cell--width-35-xl  { flex: 0 0 calc(35%      - var(--grid-gutter) * 0.65);    max-width: calc(35%      - var(--grid-gutter) * 0.65); }
  .grid__cell--width-40-xl  { flex: 0 0 calc(40%      - var(--grid-gutter) * 0.6);     max-width: calc(40%      - var(--grid-gutter) * 0.6); }
  .grid__cell--width-45-xl  { flex: 0 0 calc(45%      - var(--grid-gutter) * 0.55);    max-width: calc(45%      - var(--grid-gutter) * 0.55); }
  .grid__cell--width-50-xl  { flex: 0 0 calc(50%      - var(--grid-gutter) * 0.5);     max-width: calc(50%      - var(--grid-gutter) * 0.5); }
  .grid__cell--width-55-xl  { flex: 0 0 calc(55%      - var(--grid-gutter) * 0.45);    max-width: calc(55%      - var(--grid-gutter) * 0.45); }
  .grid__cell--width-60-xl  { flex: 0 0 calc(60%      - var(--grid-gutter) * 0.4);     max-width: calc(60%      - var(--grid-gutter) * 0.4); }
  .grid__cell--width-65-xl  { flex: 0 0 calc(65%      - var(--grid-gutter) * 0.35);    max-width: calc(65%      - var(--grid-gutter) * 0.35); }
  .grid__cell--width-66-xl  { flex: 0 0 calc(66.666%  - var(--grid-gutter) * 0.33334); max-width: calc(66.666%  - var(--grid-gutter) * 0.33334); }
  .grid__cell--width-70-xl  { flex: 0 0 calc(70%      - var(--grid-gutter) * 0.3);     max-width: calc(70%      - var(--grid-gutter) * 0.3); }
  .grid__cell--width-75-xl  { flex: 0 0 calc(75%      - var(--grid-gutter) * 0.25);    max-width: calc(75%      - var(--grid-gutter) * 0.25); }
  .grid__cell--width-80-xl  { flex: 0 0 calc(80%      - var(--grid-gutter) * 0.2);     max-width: calc(80%      - var(--grid-gutter) * 0.2); }
  .grid__cell--width-85-xl  { flex: 0 0 calc(85%      - var(--grid-gutter) * 0.15);    max-width: calc(85%      - var(--grid-gutter) * 0.15); }
  .grid__cell--width-90-xl  { flex: 0 0 calc(90%      - var(--grid-gutter) * 0.1);     max-width: calc(90%      - var(--grid-gutter) * 0.1); }
  .grid__cell--width-95-xl  { flex: 0 0 calc(95%      - var(--grid-gutter) * 0.05);    max-width: calc(95%      - var(--grid-gutter) * 0.05); }
  .grid__cell--width-100-xl { flex: 0 0 100%; max-width: 100%; }
  .grid__cell--width-auto-xl { flex: 1; max-width: none; }
}