/* Section "facts": the cream band with the bumper and the key facts (when, where ...). */

.facts { position: relative; z-index: 4; background: var(--color-cream); color: var(--color-cream-ink); }
.facts__inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); align-items: center; padding-block: var(--space-3xl); }
.facts__crest { margin: 0; justify-self: center; width: min(100%, var(--crest-w)); }
.facts__crest .crest { width: 100%; height: auto; overflow: visible; }
.facts__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); margin: 0; }
.facts__list > div { min-width: 0; }
.facts__label { color: var(--color-ochre-deep); margin-bottom: var(--space-2xs); }
.facts__value {
  margin: 0; color: var(--color-paper); overflow-wrap: break-word; font-variant-numeric: tabular-nums;
  font-weight: 800; font-stretch: var(--wdth-wide); font-size: var(--type-title);
  /* two-line values (the prices) need a little air between their lines; balance keeps
     "Eventhalle, / ENTER Technikwelt" from leaving one word alone */
  line-height: var(--leading-snug); text-wrap: balance;
}
@media (max-width: 48rem) {
  .facts__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-block: var(--space-2xl); }
  .facts__crest { width: var(--crest-w-small); }
  /* stacked under the bumper, the facts read best centred */
  .facts__list { text-align: center; }
}
@media (max-width: 30rem) { .facts__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); } }