.data-statistics-callout-container {
    padding-block: 3rem 8rem;
    color: var(--color-primary-white);
    background-size: contain;
    display: grid;
    grid-template-areas: 'stats';
    max-width: 100vw;
    overflow-x: hidden;
}

.data-statistics-callout-container.light-orange-bg,
.data-statistics-callout-container.light-orange-bg .data-statistics-callout-copy h3,
.data-statistics-callout-container.orange-bg,
.data-statistics-callout-container.orange-bg .data-statistics-callout-copy h3{
    color: var(--color-primary-black);
}
.data-statistics-callout-container > * {
    grid-area: stats;
}

.data-statistics-callout-container .region.wide {
    position: relative;
    z-index: 1;
}

.data-statistics-callout-container .data-statistics-background-image{
    width: 100%;
    height: 100%;
    background-image: url('../svgs/data-statistics-callout-background-texture.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    transform: translateX(12rem);
}

.data-statistics-callout-container .data-statistics-callout-copy{
    text-align: center;
}

.data-statistics-callout-container .data-statistics-callout-copy h3 {
    color: var(--color-primary-white);
    font-size: 4.5rem;
}

.data-statistics-callout-container .data-statistics {
    display: grid;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    margin-top: 3rem;
}

.data-statistics-callout-container.stats-3 .data-statistics {
    grid-template-columns: 46.5rem 46.5rem 46.5rem;
}



.data-statistics-callout-container.stats-2 .data-statistics {
    grid-template-columns: 1fr 1fr;
}

.data-statistics-callout-container.stats-1 .data-statistics {
    grid-template-columns: 1fr;
}

.data-statistics-callout-container .data-statistics .data-statistics-callout-statistic {
    text-align: center;
    height: 100%;
    padding-inline: 5rem;
}

.data-statistics-callout-container .data-statistics .data-statistics-callout-statistic:not(:nth-child(1)) {
    border-left: solid var(--color-primary-white-opacity) 2px;
}

.data-statistics-callout-container .data-statistics .data-statistics-callout-statistic-number {
    font-size: 13.5rem;
}

.data-statistics-callout-container .data-number {
    opacity: 0;
    transition: all 0.5s ease-in;

}

.data-statistics-callout-container .dollar-sign {
    font-family: Montserrat, sans-serif;
}
.data-statistics-callout-container .data-number.small {
    font-size: 10.5rem;
}
.data-statistics-callout-container.animate .data-number {
    opacity: 1;
}
.data-statistics-callout-container .data-statistics .data-statistics-callout-statistic-copy{
    font-size: 2.5rem;
}

@media screen and (max-width: 90em) {
    .data-statistics-callout-container.stats-3 .data-statistics {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media screen and (max-width: 78em) {
    .data-statistics-callout-container.stats-3 {
        padding-inline: var(--mobile-inline-padding);
    }
    .data-statistics-callout-container.stats-3 .data-statistics {
        grid-template-columns: 1fr;
    }

    .data-statistics-callout-container.stats-3 .data-statistics .data-statistics-callout-statistic:not(:nth-child(1)) {
        border-top: solid var(--color-primary-white) 2px;
        border-left: none;
    }
}

@media screen and (max-width: 50em) {
    .data-statistics-callout-container.stats-2 {
        padding-inline: var(--mobile-inline-padding);
    }

    .data-statistics-callout-container.stats-2 .data-statistics {
        grid-template-columns: 1fr;
    }
    .data-statistics-callout-container.stats-2 .data-statistics .data-statistics-callout-statistic:not(:nth-child(1)) {
        border-top: solid var(--color-primary-white) 2px;
        border-left: none;
    }
}

@media screen and (max-width: 40em){
    .data-statistics-callout-container .data-statistics .data-statistics-callout-statistic-number,
    .data-statistics-callout-container .data-number.small{
        font-size: 7rem;
    }
}

@media screen and (max-width: 30em) {
    .data-statistics-callout-container .data-statistics .data-statistics-callout-statistic {
        padding-inline: 0;
    }
}
