.hero.home {
    overflow: hidden;
}
.hero.home .hero-background-image {
    background-position: center center;
}

@keyframes zoomIn {
    0% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.hero.home.animate .hero-background-image {
    background-size: cover;
    transform: none;
    max-height: 60rem;
    height: 100%;
    width: 100%;
    max-width: 100vw;
    animation: zoomIn 1.5s ease-in-out;
}

.hero:not(.no-image) .hero-wrapper {
    display: grid;
    grid-template-rows: auto auto;
}

.hero.home .hero-number {
    color: var(--color-primary-white);
    font-size: 27.5rem;
    text-align: center;
    line-height: 1.25;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    transform: translateY(5.5rem);
}

.hero.home .hero-number.animate {
    opacity: 1;
}

.hero.home .hero-number .comma {
    opacity: 0;
    transition: opacity 1s ease-in;
    width: 0;
    display: inline-block;
}

.hero.home .hero-number .comma.animate {
    opacity: 1;
    width: auto;
}


.hero.home .number-copy {
    color: var(--color-brand-orange-light);
    text-align: center;
    transform: translateY(3rem);
}

.hero.home .hero-number-copy {
    transition: all 2s ease-in-out;
    opacity: 0;
}

.hero.home.animate .hero-number-copy {
    opacity: 1;

}


.hero.home .hero-headline {
    font-size: 4rem;
}



@media screen and (max-width: 95em) {
    .hero.home .hero-number {
        font-size: 20rem;
    }

}

@media screen and (max-width: 75em) {
    .hero.home .number-copy {
        margin-bottom: 4rem;
    }
}


@media screen and (max-width: 60em) {
    .hero.home .hero-number {
        font-size: calc(100vw / 5);
        transform: translateY(2rem);
    }

    .hero.home .hero-number-copy {
        padding-inline: var(--mobile-inline-padding);
    }

    .hero.home .number-copy {
        font-size: 2rem;
        transform: translateY(0);
    }

}

@media screen and (max-width: 50em) {
    .hero.home .hero-headline.h2 {
        font-size: 3rem;
    }
}