@layer genr.component {
    .headline {
        text-wrap: balance;
    }

    .h1 {
        line-height: 1.048; /* 44px */
        font-weight: 700;
        font-size: 2.625rem; /* 42px */
        hyphens: auto;

        @media (width > 768px) {
            font-size: 3.5rem; /* 56px */
            line-height: 1.071; /* 60px */
        }
    }

    .h2 {
        font-size: 2.25rem; /* 36px */
        line-height: 1.111; /* 40px */
        letter-spacing: 0;
        font-weight: 700;
        hyphens: auto;

        @media (width > 768px) {
            font-size: 3rem; /* 48px */
            line-height: 1.167; /* 56px */
            letter-spacing: 0;
        }
    }

    .h3 {
        font-size: 1.75rem; /* 28px */
        line-height: 1.214; /* 34px */
        letter-spacing: 0.025rem; /* 0.4px */
        hyphens: auto;

        @media (width > 768px) {
            font-size: 2.5rem; /* 40px */
            line-height: 1.2; /* 48px */
            letter-spacing: 0.025rem; /* 0.4px */
        }
    }

    .h4 {
        font-size: 1.375rem; /* 22px */
        line-height: 1.273; /* 28px */
        letter-spacing: 0.0125rem; /* 0.2px */
        hyphens: auto;

        @media (width > 768px) {
            font-size: 1.875rem; /* 30px */
            line-height: 1.333; /* 40px */
            letter-spacing: 0.0125rem; /* 0.2px */
        }
    }

    .h5 {
        font-size: 1rem; /* 16px */
        line-height: 1.25; /* 20px */
        letter-spacing: 0.0125rem; /* 0.2px */
        hyphens: auto;

        @media (width > 768px) {
            font-size: 1.125rem; /* 18px */
            line-height: 1.333; /* 30px */
        }
    }

    .h6 {
        font-size: 1rem; /* 16px */
        line-height: 1.25; /* 20px */
        letter-spacing: 0.0125rem; /* 0.2px */
        hyphens: auto;
    }
}