.number {
    padding: calc(var(--spacing-md)) 0;
    position: relative;
}

.number_flex{
    padding: 0 !important;
}

.number_wrap {
    background: var(--color);
    color: var(--white);
    padding: var(--spacing-lg) 0;
    position: relative;
}

.number_top svg,
.number_bottom svg {
    display: block;
}

.number_top,
.number_bottom {
    position: absolute;
    width: 100%;
    height: auto;
    left: 0;
    z-index: 1;
}

.number_top {
    top: calc(var(--spacing-md) * 1);
    transform: translateY(-99%);
}

.number_bottom {
    bottom: calc(var(--spacing-md) * 1);
    transform: translateY(99%);
}

.number::before {
    content: '';
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="765" height="421" viewBox="0 0 765 421" fill="none"><path d="M606.03 -291.025L-242.025 557.03M-183.889 -109.057L616.197 691.029M764.014 -133.041L-84.041 715.014" stroke="white" stroke-opacity="0.24"/></svg>');
    z-index: 2;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 100%;
    background-size: cover;
    aspect-ratio: 1 / 1;
}

.number_items {
    display: flex;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.number_item {
    flex-basis: 100%;
    padding: var(--spacing-lg) var(--spacing-md);
    border-bottom: 3px solid var(--white);

    @media (min-width: 480px) {
        flex-basis: calc(100% / 2 - calc(var(--spacing-lg) * 1 / 2));
    }

    @media (min-width: 760px) {
        flex-basis: calc(100% / 3 - calc(var(--spacing-lg) * 2 / 3));
    }
}

.number_item_numb {
    font-size: var(--font-size-h2);
    font-weight: 700;
    padding-bottom: var(--spacing-sm);
}

.number_item_sing {
    max-width: calc(var(--spacing-xxl) * 3.2);
}