@layer components {
.c-component-hero { --gutter: var(--space-6); position: relative; isolation: isolate; max-inline-size: var(--wa-content-width); margin-block: var(--space-5); margin-inline: auto; padding-block: var(--space-7); border-radius: var(--wa-radius-panel); color: var(--wa-color-text); }
.c-component-hero__content { position: relative; max-inline-size: var(--component-hero-width, var(--wa-content-width)); }
.c-component-hero__content > :empty, .c-component-hero__media:empty, .c-component-hero__background:empty { display: none; }
.c-component-hero__layout { display: grid; gap: var(--space-6); }
.c-component-hero__background { position: absolute; inset: 0; overflow: clip; border-radius: inherit; z-index: -1; }
.c-component-hero__background > img { inline-size: 100%; block-size: 100%; object-fit: cover; }



.c-component-hero--grid { background-image: linear-gradient(var(--wa-context-surface-border) 1px, transparent 1px), linear-gradient(90deg, var(--wa-context-surface-border) 1px, transparent 1px); background-size: var(--space-8) var(--space-8); }
.c-component-hero--hero { min-block-size: calc(var(--space-10) * 3); display: grid; align-items: center; }
.c-component-hero--narrow { --component-hero-width: var(--container-sm); }
.c-component-hero--wide { --component-hero-width: var(--container-lg); max-inline-size: var(--container-lg); }
@media (min-width: 48rem) { .c-component-hero--split .c-component-hero__layout, .c-component-hero--media-first .c-component-hero__layout { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; } .c-component-hero--media-first .c-component-hero__media { grid-column: 1; grid-row: 1; } }
}

@layer components {
  .c-component-hero--band { max-inline-size: none; margin-block: 0; padding-block: var(--space-9); }
  .c-component-hero--band .c-component-hero__content { max-inline-size: var(--component-hero-width, var(--wa-content-width)); }
}
@layer components {

.c-component-hero--overlay { align-items: end; min-block-size: min(48rem, 88svh); }
.c-component-hero--overlay .c-component-hero__content { padding-block: var(--space-7); }
.c-component-hero--overlay .c-component-hero__background::after,
.c-component-hero--panorama .c-component-hero__background::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent, var(--wa-color-media-scrim)); }
.c-component-hero--overlay .c-component-hero__layout { max-inline-size: 50rem; }

}

@layer components {

.c-component-hero--panorama { min-block-size: min(56rem, 100svh); align-items: center; }
.c-component-hero--panorama .c-component-hero__layout { max-inline-size: 52rem; }

}