.quiz {
    display: flex; /* Use flexbox to position panels side by side */
    justify-content: space-between; /* Add space between panels */
    align-items: flex-start; /* Align panels at the top */
    padding: 20px; /* Optional padding around the panels */
  }

  .ImagePanel {
    flex: 1; /* Make panels take equal width */
    margin: 20px; /* Add spacing between panels */
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    background-color: white;
	align-items: stretch; /* Ensure panels have the same height */
	justify-content: space-between; /* Add space between panels */
	min-height: 600px; /* Set a minimum height for the panels */
    max-height: 600px; /* Optional: limit maximum height */
    overflow: hidden; /* Ensure content doesn't overflow */
  }

  .QuizzPannel {
    flex: 1; /* Make panels take equal width */
    background-color: white;
	align-items: stretch; /* Ensure panels have the same height */
	justify-content: space-between; /* Add space between panels */
	min-height: 590px; /* Set a minimum height for the panels */
    max-height: 590px; /* Optional: limit maximum height */
    overflow: hidden; /* Ensure content doesn't overflow */
  }
  
    #imagePannel {
    flex: 1; /* Make panels take equal width */
    margin: 10px; /* Add spacing between panels */
    background-color: white;
	align-items: stretch; /* Ensure panels have the same height */
	justify-content: space-between; /* Add space between panels */
	min-height: 600px; /* Set a minimum height for the panels */
    max-height: 600px; /* Optional: limit maximum height */
    overflow: hidden; /* Ensure content doesn't overflow */
  }
  
#imagePannel {
    display: flex; /* Enable flexbox */
    flex-direction: column; /* Stack elements vertically */
    justify-content: space-between; /* Separate text and image */
    align-items: center; /* Center items horizontally */
    min-height: 600px; /* Set a minimum height for the panels */
    max-height: 600px; /* Optional: limit maximum height */
    text-align: center; /* Center-align content */
    overflow: hidden; /* Prevent overflow */
    position: relative; /* Enable positioning for child elements */
}

#storeyText {
    z-index: 1; /* Keep text on top */
    background-color: rgba(255, 255, 255, 0.7); /* Add a semi-transparent background */
    padding: 5px; /* Add padding around the text */
    border-radius: 5px; /* Rounded corners for the background */
    position: absolute; /* Position text over the image */
    top: 10px; /* Position at the top of the panel */
	left: 0%; /* Move text halfway across the panel */
    width: 100%; /* Ensure text spans the width of the panel */
    text-align: center; /* Center-align the text */
    box-sizing: border-box; /* Include padding in width calculation */
}

#storeyImage {
    flex-grow: 1; /* Allow the image to grow to fill space */
    width: 100%; /* Make the image span the full width */
	min-height: 600px; /* Set a minimum height for the panels */
    max-height: 600px; /* Optional: limit maximum height */
    height: 100%; /* Make the image span the full height of the panel */
    object-fit: cover; /* Ensure the image fills the panel without distortion */
    position: absolute; /* Ensure it sits behind the text */
    top: 0; /* Align to the top of the panel */
    left: 0; /* Align to the left of the panel */
    z-index: 0; /* Ensure the image is behind the text */
}