/* =======================================
   Base Styles for Header Background
   ======================================= */
.header__background .slides {
    position: fixed;
    bottom: -50px;
}

/* Base state for background containers */
.header__background.desktop,
.header__background.mobile {
    width: 100%;
}

/* Hide the desktop version by default (mobile-first approach) */
.header__background.desktop {
    display: none;
}

/* Image styles within the slides */
.header__background.mobile .slides img {
    margin-left: 0;
    width: 100%;
    height: 100%;
}

/* =======================================
   Media Queries (Responsive Layout)
   ======================================= */

/* --- Tablet/Desktop (Min-width 575px) --- */
@media screen and (min-width: 575px) {
    /* Show Desktop, Hide Mobile */
    .header__background.mobile {
        display: none;
    }
    .header__background.desktop {
        display: block;
    }
}

/* --- Small Mobile (Max-width 767px) --- */
/* The original 735px height override seems specific, so it's kept. */
@media screen and (max-width: 767px) {
    .header__background {
        height: 735px !important;
    }
}

/* --- Extra Small Mobile (Max-width 574px) --- */
@media screen and (max-width: 574px) {
    /* Target the specific mobile slides structure */
    #header-background-mobile.header__background.mobile .slides li {
        width: auto !important;
        margin-right: -144% !important;
    }

    #header-background-mobile.header__background.mobile .slides img {
        object-fit: cover;
    }
}