/*********************
 * Hero Heading *
 *********************/
@utility hero-heading {
  display: flex;
  flex-direction: column;

  > *,
  > *:where(.contents) > *,
  > *:where(astro-island, astro-slot) > * {
    max-width: 100%;
  }
}

@utility hero-heading-start {
  & {
    @apply hero-heading;
    text-align: start;
  }
}

@utility hero-heading-center {
  & {
    @apply hero-heading;
    align-self: center;
    align-items: center;
    margin-inline: auto;
    text-align: center;
  }
}

@utility hero-heading-end {
  & {
    @apply hero-heading;
    align-self: end;
    margin-inline-start: auto;
    text-align: end;
  }
}