/* =====================================================
   Immunemap responsive rules
   ===================================================== */


/* ---------- Tablet ---------- */

@media (max-width: 900px) {


    .navbar {

        height:auto;

        padding:
            20px 0;

    }


    .nav-menu {

        gap:18px;

        font-size:14px;

    }


    .hero {

        padding:
            60px 0;

    }


    .grid {

        grid-template-columns:
            repeat(2,1fr);

    }


    .organ-container {

        grid-template-columns:
            1fr;

        text-align:center;

    }


    .organ-list {

        max-width:600px;

        margin:auto;

    }


    .footer-grid {

        grid-template-columns:
            1fr 1fr;

    }

}



/* ---------- Mobile ---------- */

@media (max-width:650px) {


    .navbar {

        flex-direction:column;

        gap:20px;

    }


    .nav-menu {

        flex-direction:column;

        width:100%;

        gap:12px;

    }


    .nav-button {

        display:block;

        text-align:center;

    }



    .hero h1 {

        font-size:34px;

    }



    .hero p {

        font-size:17px;

    }



    .search-box {

        width:100%;

    }



    .search-box input {

        padding:
            15px;

        font-size:15px;

    }



    .grid {

        grid-template-columns:
            1fr;

    }



    .section {

        padding:
            50px 0;

    }



    .section-title {

        font-size:28px;

    }



    .organ-list {

        grid-template-columns:
            1fr;

    }



    .footer-grid {

        grid-template-columns:
            1fr;

        text-align:center;

    }

}