@layer components {
    .home {
        flex: 1;
        display: flex;
        align-items: center;
        padding-block: var(--space-xl);

        & .home__body {
            --flow-space: var(--space-s);
        }

        & .home__logo {
            --logo-size: clamp(5rem, 4rem + 8vw, 8rem);
            color: var(--color-text);
            margin-block-end: var(--space-m);
        }

        & .home__title {
            font-size: var(--size-step-4);
        }

        & .home__lead {
            font-size: var(--size-step-1);
            line-height: 1.4;
        }

        & .home__notice {
            padding: var(--space-2xs) var(--space-xs);
            border-inline-start: 3px solid var(--color-border-accent);
            background: var(--color-surface-raised);
        }

        & .home__actions {
            --flow-space: var(--space-l);
        }

        & .home__actions .button {
            inline-size: 100%;
        }

        @media (min-width: 30rem) {
            & .home__actions .button {
                inline-size: auto;
            }
        }

        & .home__note {
            font-size: var(--size-step--1);
        }
    }
}