.page-section-container.section-Number_Grid {
    --sp-number-grid-column-count: 2;
    --sp-number-grid-gap: 1rem;

    .number-grid {
        display: grid;
        grid-template-columns: repeat(var(--sp-number-grid-column-count), 1fr);
        gap: var(--sp-number-grid-gap);

        .number-grid__item {
            min-height: 400px;
            position: relative;
            text-align: center;

            @media screen and (max-width: 768px) {
                min-height: 250px;
            }

            &:not(:last-child)::after {
                content: "";
                position: absolute;
                top: 25%;
                right: 0;
                width: 2px;
                height: 50%;
                background-image: radial-gradient(circle, #D63628 1px, transparent 1px);
                background-size: 2px 10px;
                background-repeat: repeat-y;

                @media screen and (max-width: 768px) {
                    display: none;
                }
            }

            &:before {
                content: attr(data-number);
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 800%;
                font-weight: bold;
                color: #707070;
                opacity: 0.15;
            }
        }

        &.simple {
            @media screen and (max-width: 768px) {
                grid-template-columns: 1fr;
            }

            .number-grid__item {
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                color: #707070;
                padding: 0 3rem;

                &:before {
                    font-size: 15rem;
                    align-items: start;
                    font-family: Roboto Slab;
                }

                &:not(:last-child)::after {
                    top: 10%;
                }

                .number-grid__item-title {
                    margin-top: 18rem;
                    font-weight: 600;
                }

                .number-grid__item-body {
                    display: block;
                }
            }
        }

        &.full {
            @media screen and (max-width: 768px) {
                grid-template-columns: 1fr;
            }

            .number-grid__item {
                &:before {
                    font-size: 23rem;
                    align-items: start;
                    font-family: Roboto Slab;

                    @media screen and (max-width: 768px) {
                        font-size: 15rem;
                    }
                }

                .number-grid__item-title {
                    position: absolute;
                    top: 60%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    font-size: 3rem;
                    color: #707070;
                    font-weight: 300;
                }

                .number-grid__item-body {
                    display: none;
                }
            }
        }
    }
}