.hero-section {
    width: 100%; /* The container will take up 100% of its parent's width */
    height: 250px; /* Fixed height for the container */
    overflow: hidden; /* Crucial: Hides anything that overflows the container */
    position: relative; /* Needed if you want to position the image absolutely inside */
}

.background-image {
    width: 100%;    /* Image takes 100% width of its container */
    height: 100%;   /* Image takes 100% height of its container */
    object-fit: cover; /* This is the magic property! */
    /*
        object-fit values:
        - fill: Stretches/squishes the image to fit the container. (Not what you want)
        - contain: Scales the image down to fit fully, showing empty space if aspect ratios don't match.
        - cover: Scales the image to fill the container, **cropping** parts that don't fit while maintaining aspect ratio. (This is what you want)
        - none: Does not resize the image.
        - scale-down: Compares contain and none, uses the smaller concrete size.
    */
    object-position: center center; /* Optional: Controls which part of the image is "kept" */
    /*
        object-position values:
        - center center (default): Centers the image.
        - top left, bottom right, etc.
        - 50% 50% (same as center center)
        - 20% 80% (custom percentage for X and Y)
    */
}