.image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* flexible columns */
    gap: 1rem;
    max-width: 97.5%;
    margin-top: 1.6em;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
  }
  
  .panel {
    position: relative;
    aspect-ratio: 3 / 4; /* or 1 / 1 for square panels */
    overflow: hidden;
    border-radius: 8px;
    background-color: #eee; /* fallback */
  }
  
  .panel img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .grid-right {
    flex: 1 1 50%;
    padding: 1rem;
    box-sizing: border-box;
    font-family: 'CanvaSans', sans-serif;
  }

  
  @media screen and (max-width: 1200px) {
  .image-grid {
    position: relative; /* Normal flow, not absolute */
    padding-top: 0; /* Remove extra padding */
    margin-top: 0; /* Reset margin */
    grid-template-columns: repeat(4, 1fr); /* 4 columns in one row */
    gap: 0.75rem; /* Tighter gap for mobile */
    overflow-x: auto;
    display: grid;
    width: 100%;
  }

  .panel {
    min-width: 22vw; /* ensures visibility on smaller viewports */
  }
}