/**
 * Number Cards Component Styles
 *
 * @package JPK
 */

.number-cards {
    .number-cards-text {
        text-align: center;

        p {
            max-width: 600px;
            margin: 0px auto;
        }
    }
    .number-cards {
        gap: 50px;
        max-width: 1050px;
        margin: var(--spacing-md) auto 0px;

        @media (max-width: 992px) {
            gap: 30px;
        }
        .number-card {
            width: calc(calc(100% / 3) - 34px);
            background: linear-gradient(to bottom, #000000 0%, #181818 100%);
            border-radius: var(--border-radius-secondary);
            padding: 30px;

            @media (max-width: 992px) {
                width: calc(calc(100% / 3) - 20px);
            }
            @media (max-width: 768px) {
                width: calc(50% - 20px);
            }
            @media (max-width: 576px) {
                width: 100%;
            }
            .number {
                display: block;
                font-size: 8rem;
                font-weight: 700;
                font-family: var(--font-heading-primary);
                line-height: 1;
                text-align: center;
                color: var(--color-yellow);
                height: 8rem;

                @media (max-width: 992px) {
                    font-size: 6.5rem;
                    height: 6.5rem;
                }
                @media (max-width: 576px) {
                    font-size: 5rem;
                    height: 5rem;
                }
            }
            .number-text {
                font-size: 1.5rem;
                font-weight: 700;
                font-family: var(--font-heading-primary);
                line-height: 1.1;
                margin-bottom: 0px;
                text-align: center;
                height: calc(100% - 8rem);
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;

                @media (max-width: 992px) {
                    height: calc(100% - 6.5rem);
                }
                @media (max-width: 576px) {
                    height: calc(100% - 5rem);
                    font-size: 1.3rem;
                }
            }
        }
    }

    .yellow-text{
        margin-top:2rem;
    }
}