/* =========================
   RESPONSIVE DESIGN BREAKPOINTS
   =========================
   This file contains all responsive overrides for different device sizes and orientations.
   Each section is clearly labeled for easy navigation and editing.
*/

/* =========================
   PHONES - PORTRAIT
   (max-width: 576px) and portrait
   ========================= */
@media (max-width: 576px) and (orientation: portrait) {
    /* --- Mobile Portrait Layout --- */
    header {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        height: 100px;
        width: auto;
    }
}

/* =========================
   PHONES - LANDSCAPE
   (max-width: 576px) and landscape
   ========================= */
@media (max-width: 576px) and (orientation: landscape) {
    /* --- Mobile Landscape Layout --- */
    header {
        background-size: cover;
        background-position: center center;
        height: 150px;
        width: 100%;
    }
}

/* =========================
   TABLETS - PORTRAIT
   (min-width: 577px) and (max-width: 1024px) and portrait
   ========================= */
@media (min-width: 577px) and (max-width: 1024px) and (orientation: portrait) {

}

/* =========================
   TABLETS & DESKTOPS - LANDSCAPE
   (min-width: 769px) and landscape
   ========================= */
@media (min-width: 769px) and (orientation: landscape) {

}