.numbers {
    position: relative;
    z-index: 1;
}

.numbers__bg {
    display: none;
    position: absolute;
    inset: 0;
    z-index: -1;
}

.numbers__bg::empty {
    display: none;
}

.numbers__bg::before {
    content: "";
    display: block;
    background: #000;
    opacity: 0.3;
    position: absolute;
    inset: 0;
}

.numbers__row {
    --bs-gutter-y: var(--bs-gutter-x);
}

.numbers__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.numbers-item {
    gap: 1.1rem;
    width: 100%;
    height: 100%;
    padding: 4rem 2rem;
    border-radius: 1rem;
    background: var(--color-surface);
    text-align: center;
}

.numbers-item__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    color: var(--color-primary);
}

.numbers-item__text {
    padding-inline: 2rem;
}


.numbers[data-current-variation="2"] .numbers__title {
    text-align: center;
}

.numbers[data-current-variation="2"] .numbers-item {
    background: transparent;
}

.numbers[data-current-variation="3"] .numbers__bg {
    display: block;
}

.numbers[data-current-variation="3"] .numbers__content,
.numbers[data-current-variation="4"] .numbers__content {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}

.numbers[data-current-variation="3"] .numbers__title {
    color: var(--color-secondary);
}

.numbers[data-current-variation="3"] .numbers__row,
.numbers[data-current-variation="4"] .numbers__row {
    flex: 0 0 auto;
    grid-template-columns: repeat(1, 1fr);
    width: 50.8rem;
    max-width: 100%;
}

@media screen and (max-width: 1024.9px) {
    .numbers__row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 767.9px) {
    .numbers[data-current-variation="3"] .numbers__content,
    .numbers[data-current-variation="4"] .numbers__content {
        flex-direction: column;
        align-items: center;
    }
}

@media screen and (max-width: 575.9px) {
    .numbers__row {
        gap: 1rem;
    }

    .numbers-item {
        padding: 3rem 1rem;
    }
}