.as-container {
  inline-size: min(
    calc(100% - (2 * var(--as-container-gutter))),
    var(--as-container-lg)
  );
  margin-inline: auto;
}

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

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

.as-container--wide {
  max-inline-size: var(--as-container-wide);
}

.as-section {
  padding-block: var(--as-section-space);
}

.as-section--compact {
  padding-block: var(--as-section-space-compact);
}

.as-stack {
  --as-stack-space: var(--as-space-6);
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--as-stack-space);
}

.as-cluster {
  --as-cluster-space: var(--as-space-3);
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--as-cluster-space);
}

.as-grid {
  --as-grid-min: var(--as-layout-grid-min);
  --as-grid-space: var(--as-space-6);
  display: grid;
  gap: var(--as-grid-space);
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, var(--as-grid-min)), 1fr)
  );
}

.as-surface {
  background: var(--as-color-surface);
  border: var(--as-border-width) solid var(--as-color-border);
  border-radius: var(--as-radius-lg);
  box-shadow: var(--as-shadow-sm);
  color: var(--as-color-text);
}

.as-card {
  --as-card-padding: var(--as-space-6);
  --as-card-space: var(--as-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--as-card-space);
  padding: var(--as-card-padding);
}