.banner-container {
  display: flex;
  width: 100%;
  /* overflow: hidden; */
  max-height: 856px; /* Set max-height as provided by the user */
}

.banner-slice {
  height: 100%; /* Make slices fill the height of the container */
  object-fit: cover; /* Ensure images cover the area while maintaining aspect ratio */
  display: block;
}

/* Responsive styles for mobile */
@media (max-width: 767px) {
  .banner-slice {
    display: none; /* Hide all slices by default on mobile */
  }

  .slice-2 {
    display: block; /* Only show the 2nd slice */
    width: 100%; /* Make it full width */
    height: 100%; /* Ensure it fills height on mobile */
    object-fit: cover;
  }
}