.teaser {
  display: flex;
  flex-direction: column;
  gap: 2rem;

  padding: 3.2rem;

  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);

  box-shadow: var(--shadow);
}

.teaser--invert {
  align-items: end;
}

.teaser__eyebrow {
  display: inline-block;

  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: var(--color-primary);
}

.teaser__title {
  margin: 0;
}

.teaser__text {
  color: var(--color-muted);
  max-width: 60ch;
}

.teaser__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;

  margin-top: 1rem;
}

.teaser--accent {
  background: var(--color-accent);
  border-color: transparent;
}

.teaser--center {
  align-items: center;
  text-align: center;
}

.teaser--hero {
  padding: 6rem 4rem;
}