.white-underline {
    background-size: 100% 1px;
    background-image: linear-gradient(#ffffff, #ffffff);
    background-repeat: no-repeat;
    background-position: 0 95%;
}

.black-underline {
    background-size: 100% 1px;
    background-image: linear-gradient(#000000, #000000);
    background-repeat: no-repeat;
    background-position: 0 95%;
}

@keyframes text-underline {
    from {
        background-size: 0 1px;
    }

    to {
        background-size: 100% 1px;
    }
}

@keyframes current-horizontal {
    20% {
        width: 30%;
    }

    100% {
        width: 25%;
        right: -26%;
    }
}

@keyframes current-vertical {
    20% {
        height: 30%;
    }

    100% {
        height: 25%;
        top: -26%;
    }
}

@keyframes current-horizontal-reverse {
    20% {
        width: 30%;
    }

    100% {
        width: 25%;
        left: -26%;
    }
}

.text-display-sm {
    font-family: var(--typography-mobile-375-typescale-display-small-family);
    font-size: var(
        --typography-hex-web-mobile-375-typescale-display-small-size
    );
    line-height: var(
        --typography-hex-web-mobile-375-typescale-display-small-height
    );
    letter-spacing: var(
        --typography-hex-web-mobile-375-typescale-display-small-letter-spacing
    );

    @media (min-width: 768px) {
        font-size: var(
            --typography-hex-web-tablet-portrait-768-typescale-display-small-size
        );
        line-height: var(
            --typography-hex-web-tablet-portrait-768-typescale-display-small-height
        );
        letter-spacing: var(
            --typography-hex-web-tablet-portrait-768-typescale-display-small-letter-spacing
        );
    }

    @media (min-width: 1024px) {
        font-size: var(
            --typography-hex-web-tablet-landscape-1024-typescale-display-small-size
        );
        line-height: var(
            --typography-hex-web-tablet-landscape-1024-typescale-display-small-height
        );
        letter-spacing: var(
            --typography-hex-web-tablet-landscape-1024-typescale-display-small-letter-spacing
        );
    }

    @media (min-width: 1440px) {
        font-size: var(
            --typography-hexweb-laptop-1440-typescale-display-small-size
        );
        line-height: var(
            --typography-hexweb-laptop-1440-typescale-display-small-height
        );
        letter-spacing: var(
            --typography-hexweb-laptop-1440-typescale-display-small-letter-spacing
        );
    }

    @media (min-width: 1920px) {
        font-size: var(
            --typography-hexweb-desktop-1920-typescale-display-small-size
        );
        line-height: var(
            --typography-hexweb-desktop-1920-typescale-display-small-height
        );
        letter-spacing: var(
            --typography-hexweb-desktop-1920-typescale-display-small-letter-spacing
        );
    }

    @media (min-width: 2560px) {
        font-size: var(
            --typography-hex-web-desktop-xd-2560-typescale-display-small-size
        );
        line-height: var(
            --typography-hex-web-desktop-xd-2560-typescale-display-small-height
        );
        letter-spacing: var(
            --typography-hex-web-desktop-xd-2560-typescale-display-small-letter-spacing
        );
    }
}

.text-display-md {
    font-family: var(--typography-mobile-375-typescale-display-medium-family);
    font-size: var(
        --typography-hex-web-mobile-375-typescale-display-medium-size
    );
    line-height: var(
        --typography-hex-web-mobile-375-typescale-display-medium-height
    );
    letter-spacing: var(
        --typography-hex-web-mobile-375-typescale-display-medium-letter-spacing
    );

    @media (min-width: 768px) {
        font-size: var(
            --typography-hex-web-tablet-portrait-768-typescale-display-medium-size
        );
        line-height: var(
            --typography-hex-web-tablet-portrait-768-typescale-display-medium-height
        );
        letter-spacing: var(
            --typography-hex-web-tablet-portrait-768-typescale-display-medium-letter-spacing
        );
    }

    @media (min-width: 1024px) {
        font-size: var(
            --typography-hex-web-tablet-landscape-1024-typescale-display-medium-size
        );
        line-height: var(
            --typography-hex-web-tablet-landscape-1024-typescale-display-medium-height
        );
        letter-spacing: var(
            --typography-hex-web-tablet-landscape-1024-typescale-display-medium-letter-spacing
        );
    }

    @media (min-width: 1440px) {
        font-size: var(
            --typography-hexweb-laptop-1440-typescale-display-medium-size
        );
        line-height: var(
            --typography-hexweb-laptop-1440-typescale-display-medium-height
        );
        letter-spacing: var(
            --typography-hexweb-laptop-1440-typescale-display-medium-letter-spacing
        );
    }

    @media (min-width: 1920px) {
        font-size: var(
            --typography-hexweb-desktop-1920-typescale-display-medium-size
        );
        line-height: var(
            --typography-hexweb-desktop-1920-typescale-display-medium-height
        );
        letter-spacing: var(
            --typography-hexweb-desktop-1920-typescale-display-medium-letter-spacing
        );
    }

    @media (min-width: 2560px) {
        font-size: var(
            --typography-hex-web-desktop-xd-2560-typescale-display-medium-size
        );
        line-height: var(
            --typography-hex-web-desktop-xd-2560-typescale-display-medium-height
        );
        letter-spacing: var(
            --typography-hex-web-desktop-xd-2560-typescale-display-medium-letter-spacing
        );
    }
}

.text-display-lg {
    font-family: var(--typography-mobile-375-typescale-display-large-family);
    font-size: var(
        --typography-hex-web-mobile-375-typescale-display-large-size
    );
    line-height: var(
        --typography-hex-web-mobile-375-typescale-display-large-height
    );
    letter-spacing: var(
        --typography-hex-web-mobile-375-typescale-display-large-letter-spacing
    );

    @media (min-width: 768px) {
        font-size: var(
            --typography-hex-web-tablet-portrait-768-typescale-display-large-size
        );
        line-height: var(
            --typography-hex-web-tablet-portrait-768-typescale-display-large-height
        );
        letter-spacing: var(
            --typography-hex-web-tablet-portrait-768-typescale-display-large-letter-spacing
        );
    }

    @media (min-width: 1024px) {
        font-size: var(
            --typography-hex-web-tablet-landscape-1024-typescale-display-large-size
        );
        line-height: var(
            --typography-hex-web-tablet-landscape-1024-typescale-display-large-height
        );
        letter-spacing: var(
            --typography-hex-web-tablet-landscape-1024-typescale-display-large-letter-spacing
        );
    }

    @media (min-width: 1440px) {
        font-size: var(
            --typography-hexweb-laptop-1440-typescale-display-large-size
        );
        line-height: var(
            --typography-hexweb-laptop-1440-typescale-display-large-height
        );
        letter-spacing: var(
            --typography-hexweb-laptop-1440-typescale-display-large-letter-spacing
        );
    }

    @media (min-width: 1920px) {
        font-size: var(
            --typography-hexweb-desktop-1920-typescale-display-large-size
        );
        line-height: var(
            --typography-hexweb-desktop-1920-typescale-display-large-height
        );
        letter-spacing: var(
            --typography-hexweb-desktop-1920-typescale-display-large-letter-spacing
        );
    }

    @media (min-width: 2560px) {
        font-size: var(
            --typography-hex-web-desktop-xd-2560-typescale-display-large-size
        );
        line-height: var(
            --typography-hex-web-desktop-xd-2560-typescale-display-large-height
        );
        letter-spacing: var(
            --typography-hex-web-desktop-xd-2560-typescale-display-large-letter-spacing
        );
    }
}

.text-body-xs {
    font-family: var(--typography-mobile-375-typescale-body-xsmall-family);
    font-size: var(--typography-hex-web-mobile-375-typescale-body-xsmall-size);
    line-height: var(
        --typography-hex-web-mobile-375-typescale-body-xsmall-height
    );
    letter-spacing: var(
        --typography-hex-web-mobile-375-typescale-body-xsmall-letter-spacing
    );

    @media (min-width: 768px) {
        font-size: var(
            --typography-hex-web-tablet-portrait-768-typescale-body-xsmall-size
        );
        line-height: var(
            --typography-hex-web-tablet-portrait-768-typescale-body-xsmall-height
        );
        letter-spacing: var(
            --typography-hex-web-tablet-portrait-768-typescale-body-xsmall-letter-spacing
        );
    }

    @media (min-width: 1024px) {
        font-size: var(
            --typography-hex-web-tablet-landscape-1024-typescale-body-xsmall-size
        );
        line-height: var(
            --typography-hex-web-tablet-landscape-1024-typescale-body-xsmall-height
        );
        letter-spacing: var(
            --typography-hex-web-tablet-landscape-1024-typescale-body-xsmall-letter-spacing
        );
    }

    @media (min-width: 1440px) {
        font-size: var(
            --typography-hexweb-laptop-1440-typescale-body-xsmall-size
        );
        line-height: var(
            --typography-hexweb-laptop-1440-typescale-body-xsmall-height
        );
        letter-spacing: var(
            --typography-hexweb-laptop-1440-typescale-body-xsmall-letter-spacing
        );
    }

    @media (min-width: 1920px) {
        font-size: var(
            --typography-hexweb-desktop-1920-typescale-body-xsmall-size
        );
        line-height: var(
            --typography-hexweb-desktop-1920-typescale-body-xsmall-height
        );
        letter-spacing: var(
            --typography-hexweb-desktop-1920-typescale-body-xsmall-letter-spacing
        );
    }

    @media (min-width: 2560px) {
        font-size: var(
            --typography-hex-web-desktop-xd-2560-typescale-body-xsmall-size
        );
        line-height: var(
            --typography-hex-web-desktop-xd-2560-typescale-body-xsmall-height
        );
        letter-spacing: var(
            --typography-hex-web-desktop-xd-2560-typescale-body-xsmall-letter-spacing
        );
    }
}

.text-body-sm {
    font-family: var(--typography-mobile-375-typescale-body-small-family);
    font-size: var(--typography-hex-web-mobile-375-typescale-body-small-size);
    line-height: var(
        --typography-hex-web-mobile-375-typescale-body-small-height
    );
    letter-spacing: var(
        --typography-hex-web-mobile-375-typescale-body-small-letter-spacing
    );

    @media (min-width: 768px) {
        font-size: var(
            --typography-hex-web-tablet-portrait-768-typescale-body-small-size
        );
        line-height: var(
            --typography-hex-web-tablet-portrait-768-typescale-body-small-height
        );
        letter-spacing: var(
            --typography-hex-web-tablet-portrait-768-typescale-body-small-letter-spacing
        );
    }

    @media (min-width: 1024px) {
        font-size: var(
            --typography-hex-web-tablet-landscape-1024-typescale-body-small-size
        );
        line-height: var(
            --typography-hex-web-tablet-landscape-1024-typescale-body-small-height
        );
        letter-spacing: var(
            --typography-hex-web-tablet-landscape-1024-typescale-body-small-letter-spacing
        );
    }

    @media (min-width: 1440px) {
        font-size: var(
            --typography-hexweb-laptop-1440-typescale-body-small-size
        );
        line-height: var(
            --typography-hexweb-laptop-1440-typescale-body-small-height
        );
        letter-spacing: var(
            --typography-hexweb-laptop-1440-typescale-body-small-letter-spacing
        );
    }

    @media (min-width: 1920px) {
        font-size: var(
            --typography-hexweb-desktop-1920-typescale-body-small-size
        );
        line-height: var(
            --typography-hexweb-desktop-1920-typescale-body-small-height
        );
        letter-spacing: var(
            --typography-hexweb-desktop-1920-typescale-body-small-letter-spacing
        );
    }

    @media (min-width: 2560px) {
        font-size: var(
            --typography-hex-web-desktop-xd-2560-typescale-body-small-size
        );
        line-height: var(
            --typography-hex-web-desktop-xd-2560-typescale-body-small-height
        );
        letter-spacing: var(
            --typography-hex-web-desktop-xd-2560-typescale-body-small-letter-spacing
        );
    }
}

.text-body-md {
    font-family: var(--typography-mobile-375-typescale-body-medium-family);
    font-size: var(--typography-hex-web-mobile-375-typescale-body-medium-size);
    line-height: var(
        --typography-hex-web-mobile-375-typescale-body-medium-height
    );
    letter-spacing: var(
        --typography-hex-web-mobile-375-typescale-body-medium-letter-spacing
    );

    @media (min-width: 768px) {
        font-size: var(
            --typography-hex-web-tablet-portrait-768-typescale-body-medium-size
        );
        line-height: var(
            --typography-hex-web-tablet-portrait-768-typescale-body-medium-height
        );
        letter-spacing: var(
            --typography-hex-web-tablet-portrait-768-typescale-body-medium-letter-spacing
        );
    }

    @media (min-width: 1024px) {
        font-size: var(
            --typography-hex-web-tablet-landscape-1024-typescale-body-medium-size
        );
        line-height: var(
            --typography-hex-web-tablet-landscape-1024-typescale-body-medium-height
        );
        letter-spacing: var(
            --typography-hex-web-tablet-landscape-1024-typescale-body-medium-letter-spacing
        );
    }

    @media (min-width: 1440px) {
        font-size: var(
            --typography-hexweb-laptop-1440-typescale-body-medium-size
        );
        line-height: var(
            --typography-hexweb-laptop-1440-typescale-body-medium-height
        );
        letter-spacing: var(
            --typography-hexweb-laptop-1440-typescale-body-medium-letter-spacing
        );
    }

    @media (min-width: 1920px) {
        font-size: var(
            --typography-hexweb-desktop-1920-typescale-body-medium-size
        );
        line-height: var(
            --typography-hexweb-desktop-1920-typescale-body-medium-height
        );
        letter-spacing: var(
            --typography-hexweb-desktop-1920-typescale-body-medium-letter-spacing
        );
    }

    @media (min-width: 2560px) {
        font-size: var(
            --typography-hex-web-desktop-xd-2560-typescale-body-medium-size
        );
        line-height: var(
            --typography-hex-web-desktop-xd-2560-typescale-body-medium-height
        );
        letter-spacing: var(
            --typography-hex-web-desktop-xd-2560-typescale-body-medium-letter-spacing
        );
    }
}

.text-body-lg {
    font-family: var(--typography-mobile-375-typescale-body-large-family);
    font-size: var(--typography-hex-web-mobile-375-typescale-body-large-size);
    line-height: var(
        --typography-hex-web-mobile-375-typescale-body-large-height
    );
    letter-spacing: var(
        --typography-hex-web-mobile-375-typescale-body-large-letter-spacing
    );

    @media (min-width: 768px) {
        font-size: var(
            --typography-hex-web-tablet-portrait-768-typescale-body-large-size
        );
        line-height: var(
            --typography-hex-web-tablet-portrait-768-typescale-body-large-height
        );
        letter-spacing: var(
            --typography-hex-web-tablet-portrait-768-typescale-body-large-letter-spacing
        );
    }

    @media (min-width: 1024px) {
        font-size: var(
            --typography-hex-web-tablet-landscape-1024-typescale-body-large-size
        );
        line-height: var(
            --typography-hex-web-tablet-landscape-1024-typescale-body-large-height
        );
        letter-spacing: var(
            --typography-hex-web-tablet-landscape-1024-typescale-body-large-letter-spacing
        );
    }

    @media (min-width: 1440px) {
        font-size: var(
            --typography-hexweb-laptop-1440-typescale-body-large-size
        );
        line-height: var(
            --typography-hexweb-laptop-1440-typescale-body-large-height
        );
        letter-spacing: var(
            --typography-hexweb-laptop-1440-typescale-body-large-letter-spacing
        );
    }

    @media (min-width: 1920px) {
        font-size: var(
            --typography-hexweb-desktop-1920-typescale-body-large-size
        );
        line-height: var(
            --typography-hexweb-desktop-1920-typescale-body-large-height
        );
        letter-spacing: var(
            --typography-hexweb-desktop-1920-typescale-body-large-letter-spacing
        );
    }

    @media (min-width: 2560px) {
        font-size: var(
            --typography-hex-web-desktop-xd-2560-typescale-body-large-size
        );
        line-height: var(
            --typography-hex-web-desktop-xd-2560-typescale-body-large-height
        );
        letter-spacing: var(
            --typography-hex-web-desktop-xd-2560-typescale-body-large-letter-spacing
        );
    }
}

.text-label-sm {
    font-family: var(--typography-mobile-375-typescale-label-small-family);
    font-size: var(--typography-hex-web-mobile-375-typescale-label-small-size);
    line-height: var(
        --typography-hex-web-mobile-375-typescale-label-small-height
    );
    letter-spacing: var(
        --typography-hex-web-mobile-375-typescale-label-small-letter-spacing
    );

    @media (min-width: 768px) {
        font-size: var(
            --typography-hex-web-tablet-portrait-768-typescale-label-small-size
        );
        line-height: var(
            --typography-hex-web-tablet-portrait-768-typescale-label-small-height
        );
        letter-spacing: var(
            --typography-hex-web-tablet-portrait-768-typescale-label-small-letter-spacing
        );
    }

    @media (min-width: 1024px) {
        font-size: var(
            --typography-hex-web-tablet-landscape-1024-typescale-label-small-size
        );
        line-height: var(
            --typography-hex-web-tablet-landscape-1024-typescale-label-small-height
        );
        letter-spacing: var(
            --typography-hex-web-tablet-landscape-1024-typescale-label-small-letter-spacing
        );
    }

    @media (min-width: 1440px) {
        font-size: var(
            --typography-hexweb-laptop-1440-typescale-label-small-size
        );
        line-height: var(
            --typography-hexweb-laptop-1440-typescale-label-small-height
        );
        letter-spacing: var(
            --typography-hexweb-laptop-1440-typescale-label-small-letter-spacing
        );
    }

    @media (min-width: 1920px) {
        font-size: var(
            --typography-hexweb-desktop-1920-typescale-label-small-size
        );
        line-height: var(
            --typography-hexweb-desktop-1920-typescale-label-small-height
        );
        letter-spacing: var(
            --typography-hexweb-desktop-1920-typescale-label-small-letter-spacing
        );
    }

    @media (min-width: 2560px) {
        font-size: var(
            --typography-hex-web-desktop-xd-2560-typescale-label-small-size
        );
        line-height: var(
            --typography-hex-web-desktop-xd-2560-typescale-label-small-height
        );
        letter-spacing: var(
            --typography-hex-web-desktop-xd-2560-typescale-label-small-letter-spacing
        );
    }
}

.text-label-md {
    font-family: var(--typography-mobile-375-typescale-label-medium-family);
    font-size: var(--typography-hex-web-mobile-375-typescale-label-medium-size);
    line-height: var(
        --typography-hex-web-mobile-375-typescale-label-medium-height
    );
    letter-spacing: var(
        --typography-hex-web-mobile-375-typescale-label-medium-letterspacing
    );

    @media (min-width: 768px) {
        font-size: var(
            --typography-hex-web-tablet-portrait-768-typescale-label-medium-size
        );
        line-height: var(
            --typography-hex-web-tablet-portrait-768-typescale-label-medium-height
        );
        letter-spacing: var(
            --typography-hex-web-tablet-portrait-768-typescale-label-medium-letterspacing
        );
    }

    @media (min-width: 1024px) {
        font-size: var(
            --typography-hex-web-tablet-landscape-1024-typescale-label-medium-size
        );
        line-height: var(
            --typography-hex-web-tablet-landscape-1024-typescale-label-medium-height
        );
        letter-spacing: var(
            --typography-hex-web-tablet-landscape-1024-typescale-label-medium-letterspacing
        );
    }

    @media (min-width: 1440px) {
        font-size: var(
            --typography-hexweb-laptop-1440-typescale-label-medium-size
        );
        line-height: var(
            --typography-hexweb-laptop-1440-typescale-label-medium-height
        );
        letter-spacing: var(
            --typography-hexweb-laptop-1440-typescale-label-medium-letterspacing
        );
    }

    @media (min-width: 1920px) {
        font-size: var(
            --typography-hexweb-desktop-1920-typescale-label-medium-size
        );
        line-height: var(
            --typography-hexweb-desktop-1920-typescale-label-medium-height
        );
        letter-spacing: var(
            --typography-hexweb-desktop-1920-typescale-label-medium-letterspacing
        );
    }

    @media (min-width: 2560px) {
        font-size: var(
            --typography-hex-web-desktop-xd-2560-typescale-label-medium-size
        );
        line-height: var(
            --typography-hex-web-desktop-xd-2560-typescale-label-medium-height
        );
        letter-spacing: var(
            --typography-hex-web-desktop-xd-2560-typescale-label-medium-letterspacing
        );
    }
}

.text-label-lg {
    font-family: var(--typography-mobile-375-typescale-label-large-family);
    font-size: var(--typography-hex-web-mobile-375-typescale-label-large-size);
    line-height: var(
        --typography-hex-web-mobile-375-typescale-label-large-height
    );
    letter-spacing: var(
        --typography-hex-web-mobile-375-typescale-label-large-letter-spacing
    );

    @media (min-width: 768px) {
        font-size: var(
            --typography-hex-web-tablet-portrait-768-typescale-label-large-size
        );
        line-height: var(
            --typography-hex-web-tablet-portrait-768-typescale-label-large-height
        );
        letter-spacing: var(
            --typography-hex-web-tablet-portrait-768-typescale-label-large-letter-spacing
        );
    }

    @media (min-width: 1024px) {
        font-size: var(
            --typography-hex-web-tablet-landscape-1024-typescale-label-large-size
        );
        line-height: var(
            --typography-hex-web-tablet-landscape-1024-typescale-label-large-height
        );
        letter-spacing: var(
            --typography-hex-web-tablet-landscape-1024-typescale-label-large-letter-spacing
        );
    }

    @media (min-width: 1440px) {
        font-size: var(
            --typography-hexweb-laptop-1440-typescale-label-large-size
        );
        line-height: var(
            --typography-hexweb-laptop-1440-typescale-label-large-height
        );
        letter-spacing: var(
            --typography-hexweb-laptop-1440-typescale-label-large-letter-spacing
        );
    }

    @media (min-width: 1920px) {
        font-size: var(
            --typography-hexweb-desktop-1920-typescale-label-large-size
        );
        line-height: var(
            --typography-hexweb-desktop-1920-typescale-label-large-height
        );
        letter-spacing: var(
            --typography-hexweb-desktop-1920-typescale-label-large-letter-spacing
        );
    }

    @media (min-width: 2560px) {
        font-size: var(
            --typography-hex-web-desktop-xd-2560-typescale-label-large-size
        );
        line-height: var(
            --typography-hex-web-desktop-xd-2560-typescale-label-large-height
        );
        letter-spacing: var(
            --typography-hex-web-desktop-xd-2560-typescale-label-large-letter-spacing
        );
    }
}

.text-title-sm {
    font-family: var(--typography-mobile-375-typescale-title-small-family);
    font-size: var(--typography-hex-web-mobile-375-typescale-title-small-size);
    line-height: var(
        --typography-hex-web-mobile-375-typescale-title-small-height
    );
    letter-spacing: var(
        --typography-hex-web-mobile-375-typescale-title-small-letter-spacing
    );

    @media (min-width: 768px) {
        font-size: var(
            --typography-hex-web-tablet-portrait-768-typescale-title-small-size
        );
        line-height: var(
            --typography-hex-web-tablet-portrait-768-typescale-title-small-height
        );
        letter-spacing: var(
            --typography-hex-web-tablet-portrait-768-typescale-title-small-letter-spacing
        );
    }

    @media (min-width: 1024px) {
        font-size: var(
            --typography-hex-web-tablet-landscape-1024-typescale-title-small-size
        );
        line-height: var(
            --typography-hex-web-tablet-landscape-1024-typescale-title-small-height
        );
        letter-spacing: var(
            --typography-hex-web-tablet-landscape-1024-typescale-title-small-letter-spacing
        );
    }

    @media (min-width: 1440px) {
        font-size: var(
            --typography-hexweb-laptop-1440-typescale-title-small-size
        );
        line-height: var(
            --typography-hexweb-laptop-1440-typescale-title-small-height
        );
        letter-spacing: var(
            --typography-hexweb-laptop-1440-typescale-title-small-letter-spacing
        );
    }

    @media (min-width: 1920px) {
        font-size: var(
            --typography-hexweb-desktop-1920-typescale-title-small-size
        );
        line-height: var(
            --typography-hexweb-desktop-1920-typescale-title-small-height
        );
        letter-spacing: var(
            --typography-hexweb-desktop-1920-typescale-title-small-letter-spacing
        );
    }

    @media (min-width: 2560px) {
        font-size: var(
            --typography-hex-web-desktop-xd-2560-typescale-title-small-size
        );
        line-height: var(
            --typography-hex-web-desktop-xd-2560-typescale-title-small-height
        );
        letter-spacing: var(
            --typography-hex-web-desktop-xd-2560-typescale-title-small-letter-spacing
        );
    }
}

.text-title-md {
    font-family: var(--typography-mobile-375-typescale-title-medium-family);
    font-size: var(--typography-hex-web-mobile-375-typescale-title-medium-size);
    line-height: var(
        --typography-hex-web-mobile-375-typescale-title-medium-height
    );
    letter-spacing: var(
        --typography-hex-web-mobile-375-typescale-title-medium-letter-spacing
    );

    @media (min-width: 768px) {
        font-size: var(
            --typography-hex-web-tablet-portrait-768-typescale-title-medium-size
        );
        line-height: var(
            --typography-hex-web-tablet-portrait-768-typescale-title-medium-height
        );
        letter-spacing: var(
            --typography-hex-web-tablet-portrait-768-typescale-title-medium-letter-spacing
        );
    }

    @media (min-width: 1024px) {
        font-size: var(
            --typography-hex-web-tablet-landscape-1024-typescale-title-medium-size
        );
        line-height: var(
            --typography-hex-web-tablet-landscape-1024-typescale-title-medium-height
        );
        letter-spacing: var(
            --typography-hex-web-tablet-landscape-1024-typescale-title-medium-letter-spacing
        );
    }

    @media (min-width: 1440px) {
        font-size: var(
            --typography-hexweb-laptop-1440-typescale-title-medium-size
        );
        line-height: var(
            --typography-hexweb-laptop-1440-typescale-title-medium-height
        );
        letter-spacing: var(
            --typography-hexweb-laptop-1440-typescale-title-medium-letter-spacing
        );
    }

    @media (min-width: 1920px) {
        font-size: var(
            --typography-hexweb-desktop-1920-typescale-title-medium-size
        );
        line-height: var(
            --typography-hexweb-desktop-1920-typescale-title-medium-height
        );
        letter-spacing: var(
            --typography-hexweb-desktop-1920-typescale-title-medium-letter-spacing
        );
    }

    @media (min-width: 2560px) {
        font-size: var(
            --typography-hex-web-desktop-xd-2560-typescale-title-medium-size
        );
        line-height: var(
            --typography-hex-web-desktop-xd-2560-typescale-title-medium-height
        );
        letter-spacing: var(
            --typography-hex-web-desktop-xd-2560-typescale-title-medium-letter-spacing
        );
    }
}

.text-title-lg {
    font-family: var(--typography-mobile-375-typescale-title-large-family);
    font-size: var(--typography-hex-web-mobile-375-typescale-title-large-size);
    line-height: var(
        --typography-hex-web-mobile-375-typescale-title-large-height
    );
    letter-spacing: var(
        --typography-hex-web-mobile-375-typescale-title-large-letter-spacing
    );

    @media (min-width: 768px) {
        font-size: var(
            --typography-hex-web-tablet-portrait-768-typescale-title-large-size
        );
        line-height: var(
            --typography-hex-web-tablet-portrait-768-typescale-title-large-height
        );
        letter-spacing: var(
            --typography-hex-web-tablet-portrait-768-typescale-title-large-letter-spacing
        );
    }

    @media (min-width: 1024px) {
        font-size: var(
            --typography-hex-web-tablet-landscape-1024-typescale-title-large-size
        );
        line-height: var(
            --typography-hex-web-tablet-landscape-1024-typescale-title-large-height
        );
        letter-spacing: var(
            --typography-hex-web-tablet-landscape-1024-typescale-title-large-letter-spacing
        );
    }

    @media (min-width: 1440px) {
        font-size: var(
            --typography-hexweb-laptop-1440-typescale-title-large-size
        );
        line-height: var(
            --typography-hexweb-laptop-1440-typescale-title-large-height
        );
        letter-spacing: var(
            --typography-hexweb-laptop-1440-typescale-title-large-letter-spacing
        );
    }

    @media (min-width: 1920px) {
        font-size: var(
            --typography-hexweb-desktop-1920-typescale-title-large-size
        );
        line-height: var(
            --typography-hexweb-desktop-1920-typescale-title-large-height
        );
        letter-spacing: var(
            --typography-hexweb-desktop-1920-typescale-title-large-letter-spacing
        );
    }

    @media (min-width: 2560px) {
        font-size: var(
            --typography-hex-web-desktop-xd-2560-typescale-title-large-size
        );
        line-height: var(
            --typography-hex-web-desktop-xd-2560-typescale-title-large-height
        );
        letter-spacing: var(
            --typography-hex-web-desktop-xd-2560-typescale-title-large-letter-spacing
        );
    }
}

.text-headline-sm {
    font-family: var(--typography-mobile-375-typescale-headline-small-family);
    font-size: var(
        --typography-hex-web-mobile-375-typescale-headline-small-size
    );
    line-height: var(
        --typography-hex-web-mobile-375-typescale-headline-small-height
    );
    letter-spacing: var(
        --typography-hex-web-mobile-375-typescale-headline-small-letter-spacing
    );

    @media (min-width: 768px) {
        font-size: var(
            --typography-hex-web-tablet-portrait-768-typescale-headline-small-size
        );
        line-height: var(
            --typography-hex-web-tablet-portrait-768-typescale-headline-small-height
        );
        letter-spacing: var(
            --typography-hex-web-tablet-portrait-768-typescale-headline-small-letter-spacing
        );
    }

    @media (min-width: 1024px) {
        font-size: var(
            --typography-hex-web-tablet-landscape-1024-typescale-headline-small-size
        );
        line-height: var(
            --typography-hex-web-tablet-landscape-1024-typescale-headline-small-height
        );
        letter-spacing: var(
            --typography-hex-web-tablet-landscape-1024-typescale-headline-small-letter-spacing
        );
    }

    @media (min-width: 1440px) {
        font-size: var(
            --typography-hexweb-laptop-1440-typescale-headline-small-size
        );
        line-height: var(
            --typography-hexweb-laptop-1440-typescale-headline-small-height
        );
        letter-spacing: var(
            --typography-hexweb-laptop-1440-typescale-headline-small-letter-spacing
        );
    }

    @media (min-width: 1920px) {
        font-size: var(
            --typography-hexweb-desktop-1920-typescale-headline-small-size
        );
        line-height: var(
            --typography-hexweb-desktop-1920-typescale-headline-small-height
        );
        letter-spacing: var(
            --typography-hexweb-desktop-1920-typescale-headline-small-letter-spacing
        );
    }

    @media (min-width: 2560px) {
        font-size: var(
            --typography-hex-web-desktop-xd-2560-typescale-headline-small-size
        );
        line-height: var(
            --typography-hex-web-desktop-xd-2560-typescale-headline-small-height
        );
        letter-spacing: var(
            --typography-hex-web-desktop-xd-2560-typescale-headline-small-letter-spacing
        );
    }
}

.text-headline-lg {
    font-family: var(--typography-mobile-375-typescale-headline-large-family);
    font-size: var(
        --typography-hex-web-mobile-375-typescale-headline-large-size
    );
    line-height: var(
        --typography-hex-web-mobile-375-typescale-headline-large-height
    );
    letter-spacing: var(
        --typography-hex-web-mobile-375-typescale-headline-large-letter-spacing
    );

    @media (min-width: 768px) {
        font-size: var(
            --typography-hex-web-tablet-portrait-768-typescale-headline-large-size
        );
        line-height: var(
            --typography-hex-web-tablet-portrait-768-typescale-headline-large-height
        );
        letter-spacing: var(
            --typography-hex-web-tablet-portrait-768-typescale-headline-large-letter-spacing
        );
    }

    @media (min-width: 1024px) {
        font-size: var(
            --typography-hex-web-tablet-landscape-1024-typescale-headline-large-size
        );
        line-height: var(
            --typography-hex-web-tablet-landscape-1024-typescale-headline-large-height
        );
        letter-spacing: var(
            --typography-hex-web-tablet-landscape-1024-typescale-headline-large-letter-spacing
        );
    }

    @media (min-width: 1440px) {
        font-size: var(
            --typography-hexweb-laptop-1440-typescale-headline-large-size
        );
        line-height: var(
            --typography-hexweb-laptop-1440-typescale-headline-large-height
        );
        letter-spacing: var(
            --typography-hexweb-laptop-1440-typescale-headline-large-letter-spacing
        );
    }

    @media (min-width: 1920px) {
        font-size: var(
            --typography-hexweb-desktop-1920-typescale-headline-large-size
        );
        line-height: var(
            --typography-hexweb-desktop-1920-typescale-headline-large-height
        );
        letter-spacing: var(
            --typography-hexweb-desktop-1920-typescale-headline-large-letter-spacing
        );
    }

    @media (min-width: 2560px) {
        font-size: var(
            --typography-hex-web-desktop-xd-2560-typescale-headline-large-size
        );
        line-height: var(
            --typography-hex-web-desktop-xd-2560-typescale-headline-large-height
        );
        letter-spacing: var(
            --typography-hex-web-desktop-xd-2560-typescale-headline-large-letter-spacing
        );
    }
}

.mobile {
    @media (min-width: 768px) {
        display: none;
    }
}

.tablet {
    display: none;

    @media (min-width: 768px) {
        display: block;
    }

    @media (min-width: 1024px) {
        display: none;
    }
}

.desktop {
    display: none;

    @media (min-width: 1024px) {
        display: block;
    }

    @media (min-width: 1440px) {
        display: none;
    }
}

.largeDesktop {
    display: none;

    @media (min-width: 1440px) {
        display: block;
    }

    @media (min-width: 1920px) {
        display: none;
    }
}

.ultraWide {
    display: none;

    @media (min-width: 1920px) {
        display: block;
    }

    @media (min-width: 2560px) {
        display: none;
    }
}

.fourK {
    display: none;

    @media (min-width: 2560px) {
        display: block;
    }
}

.smallScreen {
    @media (min-width: 1024px) {
        display: none;
    }
}

.middleScreen {
    display: none;

    @media (min-width: 1024px) {
        display: block;
    }

    @media (min-width: 1920px) {
        display: none;
    }
}

.largeScreen {
    display: none;

    @media (min-width: 1920px) {
        display: block;
    }
}