:where(.component-stats) {
    container: stats / inline-size;

    .component-stats-single-stat {
        &:nth-child(2) {
            .sparkles {
                background-image: url("images/sparkles-green.png");

            }
        }
    }

    :where(.single-stat) {
        display: grid;
        justify-items: center;
        padding-inline: 2rem;
        width: 100%;
    }

    :where(.single-stat .stat) {
        font-size: 12rem;
        font-weight: 700;
        line-height: 1;
        background-image: linear-gradient(var(--color-brand-teal), var(--color-brand-navy));
        color: transparent;
        background-clip: text;


    }

    .details {
        font-size: 2.4rem;
        line-height: 1;
    }


    :where(.sparkles) {
        background-image: url("images/sparkles-orange.png");
        display: block;
        width: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        min-height: 2.2rem;
        background-position: center;
    }


}

@media print {
    :where(.component-stats) {
        .stats {
            grid-template-columns: 1fr;
        }

        :where(.single-stat .stat) {
            font-size: 4rem;
            background-image: none !important;
            color: var(--color-brand-navy) !important;
        }

        :where(.sparkles) {
            display: none !important;
        }

        :where(.single-stat) {
            page-break-inside: avoid;
        }
    }
}

@container stats (width < 125rem) {
    :where(.component-stats) {
        .stat {
            font-size: 8rem;
        }


        :where(.sparkles) {
            transform: scale(0.8);
        }
    }

}


@container stats (width < 80rem) {
    :where(.component-stats) {
        .stats {
            grid-template-columns: 1fr;
            gap: var(--size-medium);
        }
    }
}