:root {
  --key-width: 20rem;
  --min-value-width: 15rem;
}

.key-value-list {
  display: grid;
  grid-template-columns: var(--key-width) 1fr;
  gap: 0.625rem 1rem;
  align-items: baseline;
}

.key-value-list > label,
.key-value-list > dt {
  font-weight: bold;
}

.key-value-list input[type='text'],
.key-value-list input[type='url'],
.key-value-list input[type='email'] {
  min-width: 10rem;
  width: 100%;
}

.key-value-list textarea {
  min-width: 10rem;
  width: 100%;
}

@media (max-width: 640px) {
  .key-value-list {
    grid-template-columns: 1fr;
    gap: 0.25rem 0;
  }

  .key-value-list > label,
  .key-value-list > dt {
    margin-top: 0.5rem;
  }
}