.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%; /* 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 */
}

.timeline_row {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 5px;
  /*align-items: center;*/
  /*gap: 12px;*/
}

.image_timeline_container {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  max-width: 100%;
  /*margin: 0;*/
  padding: 10px;
  box-sizing: border-box;
  background-color: white;
  /*box-shadow: 0 0 10px rgba(0,0,0,0.1);*/
}

.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 */
}