/*
 * QARAR B2B — Mobile Why Participate Compact Layout
 * Mobile only: <= 767px
 */

@media (max-width: 767px) {

    /* Reduce the overall section height */
    #why {
        padding-block: 38px;
    }

    #why .section-heading {
        margin-bottom: 16px;
    }

    #why .section-heading h2 {
        margin-bottom: 6px;
    }

    #why .section-heading p:last-child {
        font-size: 12.5px;
        line-height: 1.75;
    }

    /* 2 × 2 compact grid instead of one long vertical column */
    #why .benefit-cards {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-top: 1px solid var(--line);
        border-right: 1px solid var(--line);
    }

    #why .benefit-card {
        min-height: 132px;
        padding: 15px 13px 14px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-left: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
    }

    #why .card-number {
        margin: 0;
        font-size: 23px;
        line-height: 1;
        font-weight: 800;
    }

    #why .benefit-card h3 {
        margin: 18px 0 0;
        font-size: 12.5px;
        line-height: 1.65;
        font-weight: 700;
    }

    #why .benefit-card p {
        margin: 5px 0 0;
        font-size: 10.8px;
        line-height: 1.65;
    }
}


/* Very small phones */
@media (max-width: 360px) {

    #why .benefit-card {
        min-height: 124px;
        padding: 13px 11px;
    }

    #why .card-number {
        font-size: 21px;
    }

    #why .benefit-card h3 {
        margin-top: 14px;
        font-size: 11.8px;
    }

    #why .benefit-card p {
        font-size: 10.2px;
    }
}