/* Reset body margins to allow full-screen images on mobile */
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* --- Desktop Styles (Default) --- */
.mainimage {
    display: block;
    width: 100vw;
    height: 100vw;
    object-fit: scale-down;
    object-position: center;
    max-width: 100%;
}

.text-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    text-align: center;
    font-size: 5vw;
    padding: 20px;
}

/* --- Mobile Styles (Phone screens) --- */
@media (max-width: 767px) {
    .mainimage {
        width: 100vw;
        height: 100vh; 
        /* 'cover' scales the image to fill the screen (may crop edges) */
        /* Change to 'contain' if you want to see the full photo with bars */
        object-fit: contain; 
        max-width: none; 
    }

    .text-container {
        font-size: 10vw; /* Larger text for mobile readability */
    }
}