@layer components {
    .sf-hero--home {
        min-height: 10.5rem;
        max-height: 10.5rem;
        grid-template-columns: minmax(0, 1.55fr) minmax(7.5rem, 0.85fr);
    }

    .sf-hero--home .sf-hero__content {
        gap: var(--sf-space-2);
        min-width: 0;
        padding: var(--sf-space-3) var(--sf-space-4);
    }

    .sf-hero--home .sf-hero__content h2 {
        margin: 0;
        font-size: clamp(1.2rem, 4.8vw, 1.6rem);
        line-height: 1.08;
    }

    .sf-hero--home .sf-hero__body {
        display: none;
        margin: 0;
    }

    .sf-hero--home .sf-button {
        min-height: 2.75rem;
        padding: var(--sf-space-2) var(--sf-space-3);
    }

    .sf-hero--home > .sf-responsive-image,
    .sf-hero--home > .sf-skeleton {
        width: 100%;
        height: 100%;
        min-height: 0;
        aspect-ratio: auto;
    }

    .sf-hero--home .sf-responsive-image > img {
        object-position: center 38%;
    }

    @media (min-width: 43rem) {
        .sf-hero.sf-hero--home {
            min-height: 12rem;
            max-height: 12rem;
            grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
        }

        .sf-hero--home .sf-hero__content {
            padding: var(--sf-space-4) var(--sf-space-5);
        }

        .sf-hero--home .sf-hero__content h2 {
            font-size: clamp(1.4rem, 2.1vw, 1.85rem);
        }

        .sf-hero--home .sf-hero__body {
            display: -webkit-box;
            max-width: 40rem;
            overflow: hidden;
            font-size: var(--sf-font-size-100);
            line-height: 1.35;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .sf-hero.sf-hero--home .sf-responsive-image {
            min-height: 0;
        }
    }
}