/**
 * Responsive
 *
 * Global responsive rules only.
 *
 * Section-specific responsive rules are handled
 * inside their respective CSS files.
 *
 * @package Manu_Portfolio
 */


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

@media (min-width: 1201px) {

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

}


/* =====================================================
   TABLET / SMALL DESKTOP
   ===================================================== */

@media (max-width: 1200px) {

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

}


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

@media (max-width: 900px) {

    :root {
        --header-height: 72px;
        --container-padding: 24px;
    }

}


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

@media (max-width: 600px) {

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

}


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

@media (max-width: 400px) {

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

}


/* =====================================================
   REDUCED MOTION
   ===================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

}