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

@media (max-width: 768px) {

    :root {
        --container-padding: 16px;
    }


    /* =====================================================
       GLOBAL
       ===================================================== */

    .section {
        padding: 56px 0;
    }


    /* =====================================================
       HEADER
       ===================================================== */

    .site-header__inner {
        min-height: 70px;
    }

    .site-header__navigation {
        display: none;
    }

    .site-header__button {
        display: none;
    }


    /* =====================================================
       HERO
       ===================================================== */

    .hero {
        padding: 80px 0;
    }

    .hero__actions {
        flex-direction: column;

        align-items: stretch;
    }

    .hero__actions .button,
    .hero__secondary-button {
        width: 100%;
    }

	.hero__inner {
    grid-template-columns: 1fr;
	}
	
	.hero__image {
	    max-width: 600px;
	
	    margin: 0 auto;
	}


    /* =====================================================
       PRODUCTS
       ===================================================== */

    .products-grid {
        grid-template-columns: 1fr;
    }


    /* =====================================================
       FOOTER
       ===================================================== */

    .site-footer__inner {
        flex-direction: column;

        align-items: flex-start;
    }

    .site-footer__navigation ul {
        flex-direction: column;

        gap: 12px;
    }

}

@media (max-width: 768px) {

    .site-header__inner {
        min-height: 70px;

        gap: 16px;
    }

    .site-header__navigation {
        display: none;
    }

    .site-header__button {
        display: none;
    }

    .mobile-menu-toggle {
        display: block;
    }

}