.container {
  inline-size: 100%;
  margin-inline: auto;
  max-inline-size: var(--container-width, 64rem);
}

.container-sm,
.container-md,
.container-lg,
.container-xl {
  inline-size: 100%;
  margin-inline: auto;
  padding: var(--container-padding, 1rem);
}

.container-sm {
  max-inline-size: var(--breakpoint-sm);
}

.container-md {
  max-inline-size: var(--breakpoint-md);
}

.container-lg {
  max-inline-size: var(--breakpoint-lg);
}

.container-xl {
  max-inline-size: var(--breakpoint-xl)
}


/* Responsive container utilities with fractional widths */
.container-1-4,
.container-3-4,
.container-1-3,
.container-2-3 {
  inline-size: 100%;
}

@media (width >=48rem) {
  .container-1-3 {
    max-inline-size: var(--size-1-3);
  }

  .container-2-3 {
    max-inline-size: var(--size-2-3);
  }

  .container-1-4 {
    max-inline-size: var(--size-1-4);
  }

  .container-3-4 {
    max-inline-size: var(--size-3-4);
  }
}

/* Grid row system — equal-width columns up to 12, responsive via container queries */
.row {
  display: grid;
  gap: var(--row-gap, var(--size-3));
}

.responsive-row {
  container-type: inline-size;
}

.row-1  { grid-template-columns: repeat(1, 1fr); }
.row-2  { grid-template-columns: repeat(2, 1fr); }
.row-3  { grid-template-columns: repeat(3, 1fr); }
.row-4  { grid-template-columns: repeat(4, 1fr); }
.row-5  { grid-template-columns: repeat(5, 1fr); }
.row-6  { grid-template-columns: repeat(6, 1fr); }
.row-7  { grid-template-columns: repeat(7, 1fr); }
.row-8  { grid-template-columns: repeat(8, 1fr); }
.row-9  { grid-template-columns: repeat(9, 1fr); }
.row-10 { grid-template-columns: repeat(10, 1fr); }
.row-11 { grid-template-columns: repeat(11, 1fr); }
.row-12 { grid-template-columns: repeat(12, 1fr); }

@container (max-width: 36rem) {
  .row-4  { grid-template-columns: repeat(2, 1fr); }
  .row-5  { grid-template-columns: repeat(3, 1fr); }
  .row-6  { grid-template-columns: repeat(3, 1fr); }
  .row-7  { grid-template-columns: repeat(4, 1fr); }
  .row-8  { grid-template-columns: repeat(4, 1fr); }
  .row-9  { grid-template-columns: repeat(3, 1fr); }
  .row-10 { grid-template-columns: repeat(5, 1fr); }
  .row-11 { grid-template-columns: repeat(4, 1fr); }
  .row-12 { grid-template-columns: repeat(4, 1fr); }
}

@container (max-width: 24rem) {
  .row-2,
  .row-3,
  .row-4  { grid-template-columns: 1fr; }
  .row-5  { grid-template-columns: repeat(2, 1fr); }
  .row-6  { grid-template-columns: repeat(2, 1fr); }
  .row-7  { grid-template-columns: repeat(2, 1fr); }
  .row-8  { grid-template-columns: repeat(2, 1fr); }
  .row-9  { grid-template-columns: repeat(3, 1fr); }
  .row-10 { grid-template-columns: repeat(2, 1fr); }
  .row-11 { grid-template-columns: repeat(2, 1fr); }
  .row-12 { grid-template-columns: repeat(3, 1fr); }
}

@container (max-width: 16rem) {
  .row-5,
  .row-6,
  .row-7,
  .row-8,
  .row-9,
  .row-10,
  .row-11,
  .row-12 { grid-template-columns: 1fr; }
}

/* Data display pattern — label/value pairs within row grids */
.data-row {
  & .data-label {
    color: var(--color-text-subtle);
    font-size: var(--text-sm);
    margin-block-end: var(--size-1);
  }

  & .data-value {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
  }
}