@media (min-width: 993px) {
    #hero-section {
        background-image: var(--hero-primary-image),var(--hero-secondary-image),linear-gradient(to right,var(--light-hero-color),var(--light-hero-color) 0,var(--dark-hero-color) 37%,var(--dark-hero-color));
        background-position: var(--hero-primary-desktop-position), var(--hero-secondary-desktop-position);
        background-size: var(--hero-primary-desktop-size), var(--hero-secondary-desktop-size);
        padding-top: 5rem;
    }

        #hero-section .hero-content {
            width: 50%;
        }

            #hero-section .hero-content h1 {
                font-size: 48px;
                line-height: 62px;
            }

            #hero-section .hero-content h3 {
                font-size: 24px;
                line-height: 34px;
            }
}

@media (max-width: 992px) {
    #hero-section {
        background-image: var(--hero-primary-mobile), linear-gradient(to right,var(--light-hero-color),var(--light-hero-color) 0,var(--dark-hero-color) 37%,var(--dark-hero-color));
        background-position: var(--hero-primary-mobile-position);
        padding: 5px 5px;
    }

        #hero-section .hero-content h1 {
            font-size: 48px;
            line-height: 62px;
        }

        #hero-section .hero-content h3 {
            font-size: 24px;
            line-height: 34px;
        }
}

@media (min-width: 768px) and (max-width: 992px) {
    #hero-section.tablet-bg-mirrors-desktop {
        background-image: var(--hero-primary-image),var(--hero-secondary-image),linear-gradient(to right,var(--light-hero-color),var(--light-hero-color) 0,var(--dark-hero-color) 37%,var(--dark-hero-color));
        background-position: var(--hero-primary-tablet-position), var(--hero-secondary-tablet-position);
        background-repeat: no-repeat;
    }

        #hero-section.tablet-bg-mirrors-desktop .hero-content {
            width: 50%;
        }

            #hero-section.tablet-bg-mirrors-desktop .hero-content h1 {
                font-size: 48px;
                line-height: 62px;
            }

            #hero-section.tablet-bg-mirrors-desktop .hero-content h3 {
                font-size: 24px;
                line-height: 34px;
            }
}

#hero-section {
    padding-bottom: 22em;
}

    #hero-section .generic-block-header {
        max-width: 525px;
        margin-left: auto;
        margin-right: auto;
    }

    #hero-section .generic-block-ctas a.primary {
        padding: 14px 48px;
    }

    #hero-section .generic-block-ctas a.secondary {
        padding: 14px 74px;
    }

@media (min-width: 768px) and (max-width: 991px) {
    #hero-section {
        padding-bottom: 26em;
    }
}