.hero-cta-card {
    background-color: var(--extra-light-gray);
    padding: 50px 50px 75px 75px;
    max-width: 591px;
    box-sizing: border-box;
}

.hero-cta-card-icon {
    height: 66px;
    text-align: center;
}

.hero-cta-card-icon img {
    width: 115px;
    height: auto;
}

.hero-cta-card .linkRow { 
    margin-top: 32px;
}

/* maybe define somewhere... make a defualt that can be stylyed based on the page*/

.hero-cta-card .linkRow a.tcb-big-btn { 
    width: 270px;
    box-sizing: border-box;
}

/* Mobile  */
@media screen and (max-width: 767px) {  
    .hero-cta-card {
        text-align: left;
        padding: 72px 32px; 
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .hero-cta-card-icon-wrapper {
        margin-bottom: 32px;
    }

    .hero-cta-card-header h1, .hero-cta-card-header h2{
        margin-bottom: 24px;
        font-size: 32px;
        line-height: 1.1em;
        font-family: Muli;
        font-style: normal;
        font-weight: 800;
        font-size: 32px;
    }

    .hero-cta-card .linkRow a.tcb-big-btn { 
        width: 100%;
        max-width: 414px;
        box-sizing: border-box;
    }
}

/* Tablet Only */
@media screen and (min-width: 768px) and (max-width: 1000px) {
    .hero-cta-card {
        background-color: var(--extra-light-gray);
        padding: 40px 0px 65px 80px;
        max-width: 541px;
        box-sizing: border-box;
    }
}


/* Tablet & Desktop */
@media screen and (min-width: 768px) {  

    .hero-cta-card-icon-wrapper {
        width: 115px;
        text-align: center;
    }

    /* refine h1 styling? */
    .hero-cta-card-header h1, .hero-cta-card-header h2 {
        margin-bottom: 24px;
        font-size: 36px;
        line-height: 1.1em;
        font-weight: 800;
    }

    .hero-cta-card-header {
        max-width: 440px;
    }
    
    .hero-cta-card-description {
        max-width: 416px;
    }
}