/* 1. The Container */
  .grid-container {
    display: grid;
    grid-template-areas: "stack";
    /* Change from fit-content to 100% */
    width: 100%; 
    /* Optional: Remove default body margins if you want it to touch edges */
    margin: 0; 
  }

  /* 2. Common logic for both images */
  .grid-container > img {
    grid-area: stack;
  }

  /* 3. The Bottom Image (Background) */
  .bottom {
    /* Forces image to stretch across the full screen */
    width: 100%;
    /* Keeps the image proportion correct so it doesn't stretch weirdly */
    height: auto; 
    display: block;
  }

  /* 4. The Top Image (Overlay) */
  .top {
    /* Set width relative to the screen (e.g., half the screen width) */
    width: 50%; 
    /* Center the top image */
    margin: auto; 
    z-index: 2;
  }