.header-login-cta {
    --color-primary: var(--gray-100);
}

.header-login-cta a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.header-login-cta a:hover {
    text-decoration: none;
}

.header-login-cta a:hover .text {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 3px;
    text-decoration-color: var(--white);
}

.header-login-cta a .icon,
.header-login-cta a .text {
    color: var(--color-primary);
}

.header-login-cta a .icon {
    padding-right: var(--space-1);
    font-size: 12px;
    align-self: center;
    line-height: 1.2;
}

.header-login-cta a .text {
    font-family: var(--font-display);
    font-size: 19px;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

@media screen and (min-width: 64em) {
    .header-login-cta a {
        justify-content: center;
    }

    .header-login-cta a .icon {
        padding-right: 6px;
    }
}