.container {
  width: min(100% - 32px, var(--content-max-width));
  margin-inline: auto;
}

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

.section--alt {
  background: var(--md-sys-color-surface-container);
}

.section__header {
  text-align: center;
  margin-bottom: var(--space-md);
}

.section__header .md-typescale-body-medium {
  color: var(--md-sys-color-on-surface-variant);
  margin-top: var(--space-xs);
}

.grid-2 {
  display: grid;
  gap: var(--space-md);
}

.grid-3 {
  display: grid;
  gap: var(--space-md);
}

.grid-4 {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--space-xl);
  }

  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.card-content {
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.card-content md-icon {
  color: var(--md-sys-color-primary);
  font-size: 28px;
}

.card-content .md-typescale-body-medium {
  color: var(--md-sys-color-on-surface-variant);
}