* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'arial', Sans-serif; 
   background: #fff; 
  font-weight: 100; }
h1 { font-size: .8rem; 
  margin: 30px 0 30px 20px; color: #151515; }

/* Carousel container + hide scrollbar */
.carousel-container {
  position: relative;
  width: 100vw;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scrollbar-width: none; /* Firefox */
}
.carousel-container::-webkit-scrollbar {
  display: none;         /* Chrome/Safari */
}

/* Track: flex row */
.carousel-track {
  display: flex;
}

/* Each slide */
.carousel-item {
  flex: 0 0 auto;
  margin-right: 0.5rem;
  text-align: center;
}
.carousel-item img {
  display: block;
  height: 600px;
  object-fit: cover;
  width: auto;
}
.caption {
  margin-top: .5rem;
  padding: .5rem;
  font-size: .9rem;
  background: #ffffff;
}
.carousel-item:nth-child(2n) .caption {
  background: #ffffff;
}

/* ============================= */
/* Responsive tweaks for mobile  */
/* ============================= */
@media (max-width: 768px) {
  /* Make the whole carousel a bit shorter on mobile */
  .carousel-container {
    height: auto;            /* let content define height */
  }

  /* Each item almost full-width, with small gutters */
  .carousel-item {
    flex: 0 0 90vw;          /* 90% of viewport width */
    margin-right: 0.5rem;
    color: #000000;
  }

  /* Scale down the images */
  .carousel-item img {
    height: 500px;           /* half the desktop height */
  }

  /* Tweak caption text size and padding */
  .caption {
    font-size: 0.8rem;
    text-align: left;
    /* padding: 0.4rem; */
  }

  /* Headline smaller & centered */
  h1 {
    font-size: 0.8rem;
    text-align: left;
    margin: 20px auto;
    margin-left: 20px;
  }
}