dl {
  margin: 0 0 var(--rh-space-2xl);

  dt {
    margin-block: var(--rh-space-lg);
    font-weight: bold;
  }

  dd {
    margin-block: var(--rh-space-lg);
    padding-inline-start: var(--rh-space-2xl);
  }
}

rh-alert + rh-card {
  margin-block-start: var(--rh-space-2xl);
}

.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-xl);
  grid-template-columns: 1fr 1fr 1fr;
  text-align: center;
}

.icon-card {
  &::part(header) {
    margin-block: var(--rh-space-2xl) 1rem;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  &::part(body) {
    margin-block-start: 0;
  }

  & rh-icon {
    width: var(--rh-size-icon-04);

    --rh-icon-size: 100%;
  }

  p {
    margin: 0;
  }
}

.surface-grid {
  grid-template-columns: 1fr 1fr;
  margin-block: var(--rh-space-lg) var(--rh-space-2xl);

  rh-card {
    p {
      margin-block-start: var(--rh-space-2xl);
      font-size: var(--rh-font-size-body-text-sm);

      code {
        font-size: var(--rh-font-size-code-sm);
      }
    }
  }
}

.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);
}