.container > rh-alert {
  width: 100%;
}

.card-snippet-grid {
  & h4[slot='heading'] {
    margin: 0;
  }

  & rh-card::part(header) {
    flex-flow: row;
  }
}

.surface-grid,
.color-palette-grid {
  display: grid;
  padding: 0;
  list-style-type: none;
  gap: var(--rh-space-sm);
  grid-template-columns: 1fr 1fr 1fr;
  text-align: center;
}

.surface-grid {
  grid-template-columns: 1fr 1fr;

  ::part(header) {
    margin-block-end: 1rem;
  }
}

.icon-card {
  --rh-icon-size: var(--rh-size-icon-07);
}

.color-palette-grid rh-surface {
  padding: 2rem;
  border-radius: var(--rh-border-radius-default);
  border: var(--rh-border-width-sm) solid var(--rh-color-border-subtle);
}

.pullquote-card {
  min-width: 360px;
  margin: var(--rh-space-2xl);

  &.right {
    float: right;
  }
}

/* TODO(adamjohnson): fix this with container queries in audio player */
rh-audio-player::part(toolbar) {
  --_time-slider-base: 100px;
}

label + rh-switch {
  margin-inline-start: var(--rh-space-md);
}