.hero--maximal {
  @apply bg-[var(--hero-bg-override,var(--hero-bg))] text-xl leading-8 text-[var(--text-color-override)] grid gap-y-2 lg:gap-y-5 min-h-[inherit] relative;
  --hero-bg: theme('colors.zinc.50');
  --subtitle-color-override: var(--text-color-override, inherit);

  grid-template-areas: "breadcrumb" "body";
  grid-template-rows: auto 1fr;

  .page-title {
    @apply z-10 self-end font-semibold;
  }

  .block:has(.subtitle) {
    @apply row-start-2 row-span-1 z-10 text-white;
  }

  .layout__block {
    @apply relative z-10;
  }

  .contains-media {
    @apply row-start-1 row-end-3 z-0 col-start-1 col-span-3 absolute inset-0;
  }

  .layout__region {
    @apply col-start-1 row-start-1 row-span-1;
  }

  .layout__region--breadcrumb {
    @apply row-start-1 row-span-1 z-10 relative container py-4;
  }

  .layout__region--hero {
    @apply lg:row-start-1 lg:row-span-2 grid grid-cols-1 justify-center overflow-hidden gap-y-4 py-10 lg:py-40 2xl:py-64;

    .layout__block:not(:is(.contains-media)) {
      @apply row-start-1 col-start-1 container self-end;

      + .layout__block:not(:is(.contains-media)) {
        @apply row-start-2 self-start;
      }
    }
  }
}

.hero--maximal:is(.layout--preview) {
  --banner-min-height: 40rem;

  @apply gap-y-0;

  .layout__region--hero {
    @apply row-start-2 row-span-1;
  }
}