a.header-cta {
    display: inline-block;
    background-color: var(--red);
    color: var(--white);
    text-align: center;
    font-size: var(--text-sm);
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    text-decoration: none;
    padding: 9.75px 25px;
    border-radius: 4px;
    line-height: 1.822;
    width: 100%;
}
a.header-cta:hover {
    color: var(--white);
    text-decoration: none;
}

@media (min-width: 64em) {
    a.header-cta {
        border-radius: 10px;
        backdrop-filter: blur(17.5px);
        border: 1px dashed rgba(255, 255, 255, 0.80);
        background: rgba(255, 255, 255, 0.03);
        font-size: 0.6875rem;
        font-weight: 400;
        line-height: 1;
        padding: 11.5px 22px;

        transition: background var(--transition-appendix);
    }
    a.header-cta span {
        display: block;
        font-weight: 800;
        font-size: var(--text-sm);
    }

    @media (hover : hover) {
        a.header-cta:hover {
            background: var(--red);
        }
    }
}