/* NOTE: ".caption" ASLO APPEARS IN THE FOLLOWING FILES: eventsSpecial.html, NGsOrderingOnLine.html, visualwalk.css ccc\cssR, & visualwalk.css cssCull */


  /* 1. Global Wrapper for Multiple Rows */
.gallery-wrapper {
  display: flex;
  flex-direction: column; /* Stacks row 1 and row 2 vertically */
  gap: 30px;              /* ADJUST THIS: Spacing between row 1 and row 2 */
  width: 100%;
  /* outline: 4px dotted red; */
}

/* 2. Parent Container (Modified slightly) */
.image-container {
  display: flex;
  gap: 20px;            
  width: 100%;          
  max-width: 650px;     /* Keeps the strict, smaller size on desktop */
  margin: 0 auto;       /* Centers each row on the screen */
  box-sizing: border-box;
   /* outline: 4px dotted blue; */
}

/* ... Keep all your other existing .image-wrapper, img, caption, and @media styles exactly as they were ... */

/* 1. Parent Container */
.image-container {
  display: flex;
  gap: 20px;            /* Uniform spacing between the columns */
  width: 100%;          /* Fluid on smaller screens */
  /* outline: 4px dashed yellow; */
  
  /* CHANGE THIS VALUE to control desktop size. 
     600px - 700px makes the two side-by-side images look quite small on desktop */
  max-width: 650px;     
  
  margin: 0 auto;       /* Centers the entire container on the desktop screen */
  padding: 16px;
  box-sizing: border-box;
}

/* 2. Column Wrappers */
.image-wrapper {
  flex: 1;              /* Forces both columns to take up equal width */
  min-width: 0;         /* Crucial: Prevents images from breaking out of the container */
  display: flex;
  flex-direction: column; /* Places the caption directly below the image */
}

/* 3. The Images */
.image-wrapper img {
  width: 100%;          /* Fills the width of its smaller wrapper */
  height: auto;         /* Maintains aspect ratio so they don't distort */
  display: block;       /* Removes unwanted bottom white space */
}

/* 4. Captions */
.caption {
  padding-top: 8px;     /* Small space between image and text */
}
.caption h3 {
  margin: 0 0 4px 0;
  font-size: 1rem;
  text-align: center;
}
.caption p {
  margin: 0;
  font-size: 0.85rem;
  color: #666;
}

/* 5. Mobile Breakpoint */
@media (max-width: 500px) { /* Lowered breakpoint so they stay side-by-side longer */
  .image-container {
    flex-direction: column; /* Stacks vertically on mobile phones */
    gap: 24px;             /* Adds breathing room between stacked blocks */
  }
}