.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.main {
  padding-block: var(--space-lg);
}

.stack-sm > * + * {
  margin-top: var(--space-sm);
}

.stack-md > * + * {
  margin-top: var(--space-md);
}

.stack-lg > * + * {
  margin-top: var(--space-lg);
}

.layout-grid {
  display: grid;
  gap: var(--space-lg);
}

.layout-grid--two {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr);
}

.layout-grid--two-wide {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr);
  align-items: flex-start;
  gap: var(--space-lg);
}

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

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

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
}

.page-header__actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.section-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.section-heading--inline {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.divider {
  border-bottom: 1px solid var(--color-border-subtle);
  margin-block: var(--space-md);
}

.waveform-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}

.waveform-grid__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.section--narrow {
  max-width: 720px;
}

.section--centered {
  text-align: center;
}

@media (max-width: 768px) {
  .layout-grid--two,
  .layout-grid--two-wide {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-header {
    flex-direction: column;
  }

  .section-heading--inline {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }
}