.number-series {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    color: #011937;

    .side {
        color: inherit;
        font-size: 24px;
    }

    .number-stack-container {
        position: relative;
        height: var(--number-stack-height);
        overflow: hidden;
        display: flex;
        align-items: flex-end;
    }

    .number-stack-animation {
        position: relative;
        display: flex;
        flex-direction: column;
        transition: all;
        will-change: transform;
        &.animated {
            animation: slideUpNumberSeries 1.25s ease-out forwards;
        }
    }

    .number-item {
        text-align: center;
        line-height: 1;
        height: var(--number-stack-height);
        display: flex;
        align-items: flex-end;
        justify-content: center;

        color: inherit;
        font-size: 60px;
        font-style: normal;
        font-weight: 700;
    }
}

@keyframes slideUpNumberSeries {
    from {
        transform: translateY(calc(100% - var(--number-stack-height)));
    }
    to {
        transform: translateY(0);
    }
}

@media (max-width: 1024px) {
    .number-series {
        .side {
            font-size: 10px;
        }
        .number-item {
            font-size: 24px;
        }
    }
}