/* Make a 4x3 grid. 
   - Row 1: small for dropdowns
   - Row 2: moderate for images
   - Row 3,4: smaller for plots, 
     ensuring the last row is fully visible.
*/
.grid-container {
  display: grid;
  /* 
    We reduce row heights so the last row doesn't get clipped.
    'auto' for row1 so it fits the dropdowns,
    then smaller fractional heights for rows 2..4.
  */
  grid-template-rows: auto 0.9fr 0.9fr 0.9fr;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative; /* so we can absolutely-position arrow-svg on top */
}

.cell {
  border: 1px solid #ccc; /* optional, to see cell boundaries */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5px;
}

/* Constrain images so they don't blow up row 2. */
#sun-image,
#surface-image,
#camera-image {
  max-height: 140px; /* Adjust as you see fit */
  max-width: 100%;
  display: block;
}

/* The arrow SVG covers row 2 across all 3 columns. */
#arrow-svg {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* so clicks pass through to the page */
  z-index: 10;          /* ensure arrows are on top of images */
}

/* Style for thick arrows */
.arrow {
  stroke-width: 6px;
  fill: none;
  /* enable arrowheads by referencing the marker id in JS */
}