/* ==========================================================
   ZENTIOHUB
   RESPONSIVE.CSS
   Version: 1.1
   Reconciled with component CSS
   ========================================================== */


/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media (max-width: 1200px) {

    .container {

        width: min(100% - 3rem, 1100px);

    }

}


/* ==========================================================
   DESKTOP
========================================================== */

@media (max-width: 992px) {

    section {

        padding-block: var(--space-8);

    }

    h1 {

        font-size: 2.5rem;

    }

    h2 {

        font-size: 1.85rem;

    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 768px) {

    .container {

        width: min(100% - 2rem, 100%);

    }

    h1 {

        font-size: 2rem;

    }

    h2 {

        font-size: 1.6rem;

    }

    h3 {

        font-size: 1.25rem;

    }

    .cta__button {

        width: 100%;

        justify-content: center;

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 576px) {

    body {

        font-size: .95rem;

    }

    section {

        padding-block: var(--space-7);

    }

    h1 {

        font-size: 1.75rem;

    }

    h2 {

        font-size: 1.45rem;

    }

    h3 {

        font-size: 1.15rem;

    }

    p {

        font-size: .95rem;

    }

    .review__card,
    .assessment__card,
    .glance__card,
    .educational__card,
    .lifestyle__card,
    .transparency__card {

        padding: var(--space-5);

    }

    table {

        display: block;

        overflow-x: auto;

    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 375px) {

    h1 {

        font-size: 1.5rem;

    }

    h2 {

        font-size: 1.25rem;

    }

    .container {

        width: calc(100% - 1.5rem);

    }

    .cta__button {

        padding: .85rem 1.25rem;

        font-size: .90rem;

    }

}