.wrap { box-sizing: border-box; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 calc(var(--gutter) * var(--spacing)); }

    :host { display: block; position: relative; overflow: hidden; margin-top: -84px; padding-top: calc(84px * var(--spacing)); }
    .backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
    .wrap { position: relative; z-index: 1; display: grid; justify-items: center; gap: calc(2.5rem * var(--spacing));
      padding-top: calc(clamp(3.5rem, 8vw, 6rem) * var(--spacing)); padding-bottom: calc(clamp(2.5rem, 6vw, 4.5rem) * var(--spacing)); }
    .copy { text-align: center; max-width: 46rem; width: 100%; }
    .visual { width: min(100%, 36rem); }
    @media (min-width: 1000px) {
      .wrap { grid-template-columns: minmax(0, 1fr) minmax(420px, 31rem); justify-items: stretch; align-items: center;
        gap: calc(clamp(2rem, 4vw, 4rem) * var(--spacing)); padding-top: calc(clamp(3rem, 5vw, 4.5rem) * var(--spacing)); padding-bottom: calc(clamp(2.5rem, 5vw, 4rem) * var(--spacing)); }
      .copy { text-align: left; max-width: 36rem; }
      .visual { width: 100%; }
    }
    @media (max-width: 860px) { :host { margin-top: 0; padding-top: 0; } }
    :host([variant=centered]) .wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    :host([variant=centered]) .copy { text-align: center; max-width: 46rem; }
    :host([variant=centered]) .visual { width: min(100%, 52rem); }
    :host([variant=image-led]) .visual { grid-row: 1; width: 100%; }
    @media (min-width: 1000px) {
      :host([variant=image-led]) .wrap { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
      :host([variant=image-led]) .copy { grid-column: 2; grid-row: 1; }
    }
    :host([no-visual]) .wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    :host([no-visual]) .copy { text-align: center; max-width: 46rem; grid-column: auto; grid-row: auto; }
    :host([no-visual]) .visual { display: none; }