.footer .grid-child {
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    padding-right: 0.5em;
    padding-bottom: 0.75rem;
    padding-left: 0.5em;
}

.img-placeholder {
    width: 100%;           /* Scale to the width of the parent column/screen */
    max-height: 880px;      /* Optional: Stop it from getting too massive on desktop monitors */
    aspect-ratio: 3 / 2;   /* Core fix: Automatically calculates height based on the width */
    margin: 0 auto;        /* Optional: Centers the container if it hits max-width */
}

/* Base styles for the animation container */
.morph-box {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: 8px; /* Optional: Initial border radius */
    overflow: hidden;
    /* Core: Set the 2-second transition animation */
    transition: top 2s ease-in-out, left 2s ease-in-out, 
                width 2s ease-in-out, height 2s ease-in-out, 
                border-radius 2s ease-in-out;
}

/* Stacked layout for internal images */
.morph-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure images do not distort during scaling */
    transition: opacity 2s ease-in-out;
}

/* Initial layer visibility */
.img-front { opacity: 1; }
.img-back { opacity: 0; }

/* ======== Fullscreen state after click ======== */
/* Use !important to override inline coordinates set by JS */
.morph-box.fullscreen {
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0;
    z-index: 9999;
}

/* Trigger layer cross-fade */
.morph-box.fullscreen .img-front { opacity: 0; }
.morph-box.fullscreen .img-back { opacity: 1; }