/* Banner block: a heading, a line and one button on the accent — the thing a
   page most wants its visitors to do */
.banner-block {
  align-items: center;
  background: var(--color-accent-fill);
  border-radius: var(--radius-xl);
  color: var(--color-on-accent);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  justify-content: space-between;
  padding: var(--space-l) var(--space-m-l);
}

.banner-block__text {
  --flow-space: var(--space-2xs);

  max-inline-size: var(--measure);
}

.banner-block__heading {
  color: inherit;
}

.banner-block__line {
  font-size: var(--step-1);
}

.banner-block__button {
  --button-bg: var(--color-on-accent);
  --button-bg-hover: color-mix(in oklch, var(--color-on-accent) 88%, var(--color-accent-fill));
  --button-fg: var(--color-accent-fill);
}