.main-container {
  display: flex;
  height: 100vh; /* Takes full viewport height */
  gap: 10px;     /* Space between panes */
}


/* 1st Pane: Now 30% of the total width */
.pane-one {
  /* Adjust '200px' to whatever width you prefer (e.g., 15%, 250px) */
  flex: 0 0 200px; 
  background-color: #e3f2fd;
  border: 2px solid #1976d2;
  padding: 20px;
  overflow-y: auto; /* Allows scrolling inside if content is long */
}

/* 2nd Pane: Automatically fills the remaining 70% */
.pane-two {
  flex: 1; 
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.top-image-placeholder {
  height: 25vh;
  width: 100%;
  display: flex;           /* Enables centering */
  justify-content: center;  /* Centers horizontally */
  align-items: center;      /* Centers vertically */
  background-color: #eee;   /* Optional: background color for empty space */
  overflow: hidden;
}

.top-image-placeholder img {
  max-width: 100%;
  max-height: 100%;
  height: auto;            /* Maintains aspect ratio */
  width: auto;             /* Maintains aspect ratio */
  display: block;
}



/* Secondary Content: Remaining 75% */
.bottom-content {
  flex: 1; 
  background-color: #f1f8e9;
  border: 2px solid #689f38;
  padding: 20px;
  overflow-y: auto; /* Adds a scrollbar if content is too long for the screen */
}

/* Responsive adjustments for screens smaller than 768px */
@media (max-width: 768px) {
  .main-container {
    flex-direction: column; /* Stacks Pane 1 on top of Pane 2 */
    height: auto;           /* Allows the page to grow with content */
  }

  .pane-one {
    min-height: 200px;      /* Ensures Pane 1 stays visible */
  }

  .pane-two {
    height: 500px;          /* Gives Pane 2 a set height to maintain the 25/75 split */
  }

  .top-image-placeholder {
    height: 25%;            /* Maintains your 25% requirement for the image */
  }
}