/* https://quarto.org/docs/output-formats/html-themes.html */
/* css styles */

<style>
/* Existing CSS styles */

/* --- New Carousel Styles --- */
.carousel {
  /* This ensures the carousel doesn't exceed the column width */
  width: 100%; 
  /* Set a fixed height for the carousel container */
  height: 400px; /* Adjust this value as needed for your desired size */
  /* Ensures nothing overflows the container */
  overflow: hidden; 
  /* Important for positioning the captions/nav if they are relative to the carousel */
  position: relative; 
}

.carousel-slide img {
  /* Make the image take up 100% of the slide container's width */
  width: 100%; 
  /* Make the image take up 100% of the slide container's height (same as .carousel) */
  height: 15cm; 
  /* How the image should fit into the container: */
  /* 'cover': Fills the container, cropping if necessary (maintains aspect ratio). */
  /* 'contain': Ensures the whole image is visible, leaving space if needed (maintains aspect ratio). */
  object-fit: contain; 
}

/* You might also want to ensure the slide container itself respects the height */
.carousel-slide {
  height: 100%;
}
/* --- End of New Carousel Styles --- */
</style>