/*
|--------------------------------------------------------------------------
| Barzan in Numbers
|--------------------------------------------------------------------------
*/

.numbers-section {
    padding:
        78px
        0
        76px;

    background:
        #1c1c1c;
}


/*
|--------------------------------------------------------------------------
| Eyebrow
|--------------------------------------------------------------------------
*/

.numbers-section__eyebrow {
    margin-bottom: 48px;

    color:
        var(--color-gold);

    font-size: var(--font-size-text-xsmall);
    font-weight: 700;

    line-height: 1;

    text-transform: uppercase;
}


/*
|--------------------------------------------------------------------------
| Grid
|--------------------------------------------------------------------------
*/

.numbers-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    row-gap: 48px;
}


/*
|--------------------------------------------------------------------------
| Item
|--------------------------------------------------------------------------
*/

.number-item {
    position: relative;

    min-height: 160px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        20px
        48px;

    border-left:
        1px solid
        rgba(255,255,255,.17);
}


/*
|--------------------------------------------------------------------------
| Number
|--------------------------------------------------------------------------
*/

.number-item__value {
    display: flex;
    align-items: baseline;

    margin-bottom: 16px;

    color:
        var(--color-white);

    font-family:
        var(--font-title);

    font-size:
        clamp(
            64px,
            5vw,
            86px
        );

    font-weight: 400;

    line-height: .9;

    letter-spacing:
        -.02em;

    font-variant-numeric:
        tabular-nums;
}


.number-item__suffix {
    display: inline-block;
}


/*
|--------------------------------------------------------------------------
| Label
|--------------------------------------------------------------------------
*/

.number-item__label {
    color:
        #a6a6a6;

    font-size: var(--font-size-text-small);
    font-weight: 400;

    line-height: 1.25;

    text-transform: uppercase;
}


/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 1199px) {

    .number-item {
        padding:
            20px
            35px;
    }


    .number-item__value {
        font-size: 68px;
    }

}


@media (max-width: 991px) {

    .numbers-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        row-gap: 35px;
    }


    .number-item {
        min-height: 145px;
    }

}


@media (max-width: 767px) {

    .numbers-section {
        padding:
            55px
            0;
    }


    .numbers-section__eyebrow {
        margin-bottom: 35px;
    }


    .numbers-grid {
        grid-template-columns: 1fr;

        row-gap: 0;
    }


    .number-item {
        min-height: auto;

        padding:
            28px
            20px;

        border-left:
            1px solid
            rgba(255,255,255,.17);

        border-bottom:
            1px solid
            rgba(255,255,255,.08);
    }


    .number-item:last-child {
        border-bottom: 0;
    }


    .number-item__value {
        margin-bottom: 12px;

        font-size: 58px;
    }


    .number-item__label {
        font-size: 15px;
    }

}