@layer components {
    .marketing-hero {
            align-items: stretch;
            display: grid;
            gap: 0;
            grid-template-columns: minmax(0, 1fr);
        }

    .marketing-hero__copy,
        .marketing-hero__media,
        .marketing-preview,
        .marketing-section,
        .marketing-cta {
            padding: var(--dashboard-section-padding-y-lg) var(--dashboard-section-padding-x);
        }

    .marketing-hero__copy {
            align-content: center;
            display: grid;
            gap: 1.25rem;
            min-height: 28rem;
        }

    .marketing-hero__title {
            color: var(--dashboard-color-text);
            font-size: clamp(2.25rem, 5.5vw, 3.875rem);
            font-weight: 780;
            letter-spacing: 0;
            line-height: 1.02;
            max-width: 12ch;
        }

    .marketing-hero__lede {
            color: var(--dashboard-color-text-muted);
            font-size: clamp(1rem, 2vw, 1.25rem);
            font-weight: 500;
            line-height: 1.55;
            max-width: 34rem;
        }

    .marketing-hero__media {
            align-content: center;
            border-top: 1px solid var(--dashboard-color-border);
            display: grid;
            min-width: 0;
        }

    @media (min-width: 48rem) {
        .marketing-hero {
                    gap: 3rem;
                    grid-template-columns: minmax(0, 0.9fr) minmax(25rem, 1.1fr);
                }
    }

    @media (min-width: 48rem) {
        .marketing-hero__copy,
                .marketing-hero__media,
                .marketing-contact,
                .marketing-preview,
                .marketing-pricing__header,
                .marketing-pricing__tax-callout,
                .marketing-section,
                .marketing-cta {
                    padding-left: var(--dashboard-section-padding-x-lg);
                    padding-right: var(--dashboard-section-padding-x-lg);
                }
    }

    @media (min-width: 48rem) {
        .marketing-hero__media {
                    border-top: 0;
                }
    }

    @media (min-width: 48rem) {
        .marketing-hero__copy {
                    min-height: 34rem;
                }
    }
}