/* Standard Reset */
html, body { 
    margin: 0 !important; 
    padding: 0 !important;
    width: 100%;
    /* Removed: overflow: hidden and height: 550px */
    background: #D9E4F2;
}

/* --- DESKTOP HEIGHT (Container Only) --- */
.c2, .f2, .f2 img {
    height: 550px !important;
}

/* --- MOBILE HEIGHT (Container Only) --- */
@media screen and (max-width: 600px) {
    .c2, .f2, .f2 img {
        height: 250px !important;
    }
}

/* Container & Wrapper logic */
.c2 { 
    display: flex; 
    flex-direction: column; 
    width: 100%;
    position: relative;
    overflow: hidden; /* Clips the image if it tries to leak out */
    transition: background .8s; 
}
.c2.loaded { background: transparent; }

.f2 { 
    position: relative;
    width: 100%;
    overflow: hidden;
}

.f2 img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    object-fit: cover !important; /* Ensures image fills space without stretching */
    display: block; 
    opacity: 0; 
    transition: opacity .8s; 
}

.f2 img.v { opacity: 1; }