body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: lightgrey; /* Background color for the screen */
    display: flex; /* To center the main square container */
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Prevent scrollbars if square is perfectly sized */
}

.main-square-container {
    background-color: lightgrey; /* Same as body, or a different one if you prefer */
    /* Make it square and fill screen maximally */
    width: 100vmin; /* 100% of the smaller viewport dimension (width or height) */
    height: 100vmin; /* 100% of the smaller viewport dimension */
    max-width: 100vw; /* Don't exceed viewport width */
    max-height: 100vh; /* Don't exceed viewport height */

    /* Alternatively, using aspect-ratio (more modern, better support now) */
    /* aspect-ratio: 1 / 1; */
    /* width: min(100vw, 100vh); */ /* Use the smaller of viewport width or height */

    display: flex; /* To center the grid-container within if it's smaller due to padding */
    justify-content: center;
    align-items: center;
    padding: 10px; /* Optional: if you want some space around the 3x3 grid inside the square */
    box-sizing: border-box; /* Padding won't add to the width/height */
}

.grid-container {
    display: grid;
    /* Create 3 columns of equal fractional width */
    grid-template-columns: repeat(3, 1fr);
    /* Create 3 rows of equal fractional height */
    grid-template-rows: repeat(3, 1fr);
    gap: 10px; /* Margin between grid items */
    width: 100%; /* Fill the parent (.main-square-container or its content box) */
    height: 100%; /* Fill the parent */
}

.grid-item {
    border: 1px solid black;
    background-color: #f0f0f0; /* Placeholder if images don't load or for testing */
    display: flex; /* To help center content or if you add text */
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Ensure images don't overflow their containers */
    text-decoration: none; /* Remove underline from links */
    color: inherit; /* Inherit text color if you add text */
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Or 'contain', 'fill', 'scale-down' */
    /* 'cover' will fill the area, maintaining aspect ratio, possibly cropping */
    /* 'contain' will show the whole image, maintaining aspect ratio, possibly letterboxing */
    display: block; /* Removes extra space below inline images */
}