.image_container
{
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 51.20%; /* aspect ratio */
  display: inline-block;
}

/* VIDEO_SIZING_CSS must match css, see VIDEO_SIZING_HTML */
@media screen and (max-width:300px)
{
  .image_container {
    padding-bottom: 40%; /* aspect ratio 18:10 */
  }
}

@media screen and (min-width:301px) and (max-width:600px)
{
  .image_container {
    padding-bottom: 126%; /* aspect ratio 18:10 */
  }
}

@media screen and (min-width:601px) and (max-width:800px)
{
  .image_container
  {
    padding-bottom: 42.0%; /* aspect ratio 20:9 */
  }
}

@media screen and (min-width:801px) and (max-width:1200px)
{
  .image_container
  {
    padding-bottom: 42.4%; /* aspect ratio 16:9 */
  }
}

@media screen and (min-width:1201px)
{
  .image_container
  {
    padding-bottom: 42.8%; /* aspect ratio 16:9 */
  }
}

/* Style for the image */
.image_container img
{
  display: block;
  width: 100%;
  height: auto; /* maintain aspect ratio */
}

.image_timeline_container {
    display: none;
    overflow-x: auto; /* Enable horizontal scrolling */
    white-space: nowrap; /* Prevent line breaks */
    width:90%;
    margin: 0 auto;
    padding: 10px; /* Optional: add padding around the container */
    background-color: white; /* Optional: add a background color for the container */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional: add a subtle shadow */
}

.image_timeline_container::-webkit-scrollbar {
    height: 8px; /* Height of the scrollbar */
}

.image_timeline_container::-webkit-scrollbar-thumb {
    background: #888; /* Color of the scrollbar */
    border-radius: 4px;
}

.image_timeline_container::-webkit-scrollbar-thumb:hover {
    background: #555; /* Color of the scrollbar on hover */
}

.image-row img {
    display: inline-block; /* Display images inline */
    max-width: 100px; /* Adjust image size */
    height: auto;
    margin-right: 10px; /* Adjust spacing between images */
}