/* Hero Carousel Image Styling - Match Static Website Behavior */
.hero-carousel-image {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}

/* Ensure carousel items maintain natural image proportions like static site */
#carouselExampleFade .carousel-item {
    position: relative;
}

#carouselExampleFade .carousel-item img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}

/* Let Bootstrap img-fluid class handle responsive behavior naturally */
.hero-carousel-image.img-fluid {
    object-fit: unset;
    object-position: unset;
}