.bad-perks-hero {
  background: var(--color-background);
  /* Extra room at the bottom: the panel that overlaps the hero hangs into it,
     and the buttons still need clear space above the panel. */
  padding-block: var(--dimension-7xl) calc(var(--dimension-7xl) + var(--dimension-2xl));

  /* Matches --bp-sm; SDC CSS is served unprocessed so the custom media can't be used. */
  @media (max-width: 760px) {
    padding-block: var(--dimension-5xl) calc(var(--dimension-6xl) + var(--dimension-2xl));
  }
}

.bad-perks-hero__inner {
  align-items: center;
  display: grid;
  gap: var(--dimension-3xl);
  grid-template-columns: minmax(0, 1fr);
  margin: 0 auto;
  max-width: var(--dimension-max);

  @media (min-width: 761px) {
    column-gap: var(--dimension-5xl);
  }
}

@media (min-width: 761px) {
  .bad-perks-hero--has-badge .bad-perks-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  /* The text block's visual centre sits above its box centre (the heading's
     line gap), so lift the badge a little to look centred with the content. */
  .bad-perks-hero__badge {
    margin-block-end: var(--dimension-4xl);
  }
}

.bad-perks-hero__content {
  max-width: 48rem;
}

.bad-perks-hero__heading {
  color: var(--color-primary-600);
  margin: 0 0 var(--dimension-xl);
  text-wrap: balance;
}

.bad-perks-hero__highlight {
  color: var(--color-secondary-400);
}

.bad-perks-hero__intro-text p {
  color: var(--color-foreground);
  font-size: calc(var(--text-size-m) * 1.1);
  font-weight: var(--text-weight-regular);
  line-height: var(--text-line-height-md);
}

.bad-perks-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dimension-m);
  margin-block-start: var(--dimension-3xl);
}

.bad-perks-hero__badge {
  display: flex;
  justify-content: center;
}

/* On phones everything is centered and the badge sits above the text. */
@media (max-width: 760px) {
  .bad-perks-hero {
    padding-inline: var(--dimension-xl);
  }

  .bad-perks-hero__content {
    text-align: center;
  }

  .bad-perks-hero__intro-text p {
    margin-inline: auto;
  }

  .bad-perks-hero__cta {
    flex-direction: column;
  }

  .bad-perks-hero__badge {
    order: -1;
  }
}