/* Description list: <dl class="sv-dl [sv-dl--grid|sv-dl--inline]">; pairs may be wrapped in <div>. */

.sv-dl {
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-3);
  margin: 0;
}
.sv-dl dt {
  color: var(--sv-color-text-muted);
  font-size: var(--sv-text-xs);
  font-weight: var(--sv-weight-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.sv-dl dd {
  margin: 2px 0 0;
  color: var(--sv-color-text);
}
.sv-dl dd:empty::before { content: "\2013"; color: var(--sv-color-text-muted); }

.sv-dl--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  gap: var(--sv-space-4) var(--sv-space-6);
}

.sv-dl--inline {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: var(--sv-space-2) var(--sv-space-4);
}
.sv-dl--inline > div { display: contents; }
.sv-dl--inline dt {
  font-size: var(--sv-text-sm);
  font-weight: var(--sv-weight-medium);
  letter-spacing: 0;
  text-transform: none;
}
.sv-dl--inline dd { margin: 0; }
@media (max-width: 29.99em) {
  .sv-dl--inline { grid-template-columns: 1fr; gap: 0; }
  .sv-dl--inline dd { margin-bottom: var(--sv-space-2); }
}