.cb-animated-counter {
    position: relative;

    /* Columns */
    &.variant-columns {
        .animated-counter-wrapper {
            display: flex;
            flex-flow: row wrap;
            gap: 1rem;
            padding-block-start: var(--fsc-background-full-padding-block-se);
            padding-block-end: var(--fsc-background-full-padding-block-se);

            .animated-counter-block {
                display: flex;
                flex-flow: column;
                place-content: center;
                margin: auto;
                text-align: center;
                flex: 1;

                .animated-counter-number {
                    color: var(--color-green);
                    font-size: 100px;
                }
            }
        }

        &[data-items-max="4"] {
            .animated-counter-block {
                flex: unset;
            }
        }

    }

    /* Fullscreen */
    &.variant-fullscreen {
        position: relative; 
        height: 300vh; 
        margin: 0 !important;
        z-index: 1; 

        .animated-counter-wrapper {
            position: sticky; 
            top: 0;
            height: 100vh;
            height: 100dvh;
            width: 100%;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0;
            margin: 0;
            z-index: 2; 
        }

        .animated-counter-block {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            box-sizing: border-box;
            padding: 2rem;
            opacity: 0;
            visibility: hidden;
            transform: translateY(40px);
            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, visibility 0.5s;
            
            &.is-active {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
                z-index: 10;
            }
            
            &.is-leaving {
                opacity: 0;
                transform: translateY(-40px);
                z-index: 9;
            }

            .animated-counter-title {
                font-size: 2.5rem;
                margin-bottom: 1rem;
                font-weight: 600;
                hyphens: auto;
            }

            .animated-counter-number {
                font-size: clamp(3.5rem, 12vw, 10rem);
                color: var(--color-green);
                font-weight: bold;
                line-height: 1;
            }
        }
    }

}


@media (max-width: 1199px) {
    .cb-animated-counter.variant-columns .animated-counter-wrapper {
        margin: 20vh 0;

        .animated-counter-block {
            width: 100%;
            flex: 1 0 auto;
        }

    }
}

@media (max-width: 991px) {
    .cb-animated-counter.variant-columns .animated-counter-wrapper .animated-counter-block .animated-counter-number {
        font-size: 80px;
    }
}

@media (max-width: 575px) {
    .cb-animated-counter.variant-columns .animated-counter-wrapper .animated-counter-block {
        .animated-counter-title {
            font-size: 20px;
        }
        .animated-counter-number {
            font-size: 48px;
        }
    }
    .cb-animated-counter.variant-fullscreen .animated-counter-wrapper .animated-counter-block {
        .animated-counter-title {
            font-size: 32px;
        }
    }
}