.bad-hero {
  color: var(--color-primary-500);
  padding-block: var(--dimension-7xl);
  text-align: center;

  /* 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);
    padding-inline: var(--dimension-xl);
  }
}

.bad-hero--light-blue {
  background-color: var(--color-primary-100);
  background: linear-gradient(
    to bottom,
    #dff2f9 0%,
    #eaf7fc 20%,
    #eaf7fc 80%,
    #dff2f9 100%
  );
}

.bad-hero--white {
  background-color: var(--color-neutral-000);
}

.bad-hero__inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: var(--dimension-max);
}

/* The text keeps its narrower measure; only the image uses the full width. */
.bad-hero__content {
  align-items: center;
  display: flex;
  flex-direction: column;
  max-width: 60rem;
}

.bad-hero__media {
  width: 100%;
}

/* The image fills its container (up to 1200px centered, or its column when
   left-aligned), scaling up as well as down. */
.bad-hero__media img {
  border-radius: var(--border-radius-container);
  display: block;
  height: auto;
  width: 100%;
}

/* Centered: the image sits above the text. */
.bad-hero--center .bad-hero__media {
  margin-block-end: var(--dimension-3xl);
}

/* Left-aligned: text on the left, image on the right. */
.bad-hero--left {
  text-align: start;
}

.bad-hero--left .bad-hero__inner {
  align-items: stretch;
}

.bad-hero--left .bad-hero__content {
  align-items: flex-start;
  max-width: 48rem;
}

.bad-hero--left .bad-hero__cta {
  justify-content: flex-start;
}

.bad-hero--left.bad-hero--has-image .bad-hero__inner {
  align-items: center;
  column-gap: var(--dimension-5xl);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);

  /* Matches --bp-sm; SDC CSS is served unprocessed so the custom media can't be used. */
  @media (max-width: 760px) {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--dimension-3xl);
  }
}

.bad-hero__heading {
  display: flex;
  flex-direction: column;
  margin-block-end: var(--dimension-2xl);
}

.bad-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);
  max-width: 48rem;
}

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

  @media screen and (max-width: 767px) {
    flex-direction: column;
  }
}

/* On phones the left-aligned hero looks like the centered one: image above,
   everything centered. It only turns left-aligned as the screen gets wider. */
@media (max-width: 760px) {
  .bad-hero--left {
    text-align: center;
  }

  .bad-hero--left .bad-hero__content {
    align-items: center;
  }

  .bad-hero--left .bad-hero__cta {
    justify-content: center;
  }

  .bad-hero--left.bad-hero--has-image .bad-hero__media {
    order: -1;
  }
}