@layer components {
.c-component-section { --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-section__content { position: relative; max-inline-size: var(--component-section-width, var(--wa-content-width)); }
.c-component-section__content > :empty, .c-component-section__media:empty, .c-component-section__background:empty { display: none; }
.c-component-section__layout { display: grid; gap: var(--space-6); }
.c-component-section__background { position: absolute; inset: 0; overflow: clip; border-radius: inherit; z-index: -1; }
.c-component-section__background > img { inline-size: 100%; block-size: 100%; object-fit: cover; }



.c-component-section--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-section--hero { min-block-size: calc(var(--space-10) * 3); display: grid; align-items: center; }
.c-component-section--narrow { --component-section-width: var(--container-sm); }
.c-component-section--wide { --component-section-width: var(--container-lg); max-inline-size: var(--container-lg); }
@media (min-width: 48rem) { .c-component-section--split .c-component-section__layout, .c-component-section--media-first .c-component-section__layout { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; } .c-component-section--media-first .c-component-section__media { grid-column: 1; grid-row: 1; } }
}

@layer components {
  .c-component-section--band { max-inline-size: none; margin-block: 0; padding-block: var(--space-9); }
  .c-component-section--band .c-component-section__content { max-inline-size: var(--component-section-width, var(--wa-content-width)); }
}
@layer components {
  .c-component-section--compact { padding-block: var(--space-5); }
  .c-component-section--media-first .c-component-section__media { grid-row: 1; }
  .c-component-section--glow::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse at top right, color-mix(in srgb, var(--wa-color-accent) 30%, transparent), transparent 65%); }
}