/*
 * ============================================================
 * M.H College
 * File: 90-responsive-foundation.css
 * Purpose:
 * Shared tablet and mobile responsive foundations
 * ============================================================
 */

/*
 * ============================================================
 * Tablet and mobile
 * Maximum width: 820px
 * ============================================================
 */

@media (max-width: 820px) {
    /*
     * Container
     */

    .container {
        width: min(
            calc(100% - 28px),
            var(--container)
        );
    }

    /*
     * Shared section spacing
     */

    .section {
        padding: 70px 0;
    }

    /*
     * Shared section headings
     */

    .section-heading {
        margin-bottom: 34px;
    }

    .section-heading h2 {
        font-size: clamp(
            2rem,
            6vw,
            3.1rem
        );

        line-height: 1.28;
    }

    .section-heading p:last-child {
        margin-top: 10px;

        font-size: .98rem;
        line-height: 1.85;
    }
}

/*
 * ============================================================
 * Small mobile
 * Maximum width: 560px
 * ============================================================
 */

@media (max-width: 560px) {
    /*
     * Container
     */

    .container {
        width: min(
            calc(100% - 24px),
            var(--container)
        );
    }

    /*
     * Shared section spacing
     */

    .section {
        padding: 56px 0;
    }

    /*
     * Shared section headings
     */

    .section-heading {
        margin-bottom: 28px;
    }

    .section-heading h2 {
        font-size: clamp(
            1.85rem,
            8vw,
            2.5rem
        );

        line-height: 1.3;
    }

    .section-heading p:last-child {
        font-size: .94rem;
        line-height: 1.78;
    }
}