@import "https://assets.elements.dev/assets/app/shared/ui-catalog/catalog/style.c38e1d7304920e3.css";

.card-demo-one {
  width:     100%;
  max-width: 24rem;
}

.card-demo-fields {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
}

.card-demo-fields .field {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1-5);
}

.card-demo-fields label {
  font-size:   var(--text-label);
  font-weight: var(--weight-medium);
}

.card-demo-label-row {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  font-size:       var(--text-label);
}

.card-demo-list {
  margin:       0;
  padding-left: var(--space-5);
  color:        var(--ink-soft);
}

.card-demo-list li + li {
  margin-top: var(--space-1);
}

.card-demo-presets {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-2);
}

.card-demo-terms {
  max-height:  12rem;
  overflow-y:  auto;
  padding:     var(--card-spacing);
  border-block: var(--surface-border-width) solid var(--rule-soft);
  background:  var(--bg-soft);
  color:       var(--ink-soft);
}

.card-demo-terms p {
  margin: 0;
}

.card-demo-terms p + p {
  margin-top: var(--space-3);
}

.card-demo-row {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap:                   var(--space-4);
  width:                 100%;
}

.card-demo-cover {
  aspect-ratio: 16 / 9;
}

.card-demo-stage {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-4);
  width:          100%;
}