/* ===== STL5.css: Minimalist Banner Adjustment ===== */

/* Remove image hover zoom globally */
a.image:hover img {
    transform: none !important;
    -moz-transform: none !important;
    -webkit-transform: none !important;
    -ms-transform: none !important;
}
/*
.image-container img {
    object-fit: contain; 
    max-width: 100%;
    height: auto;
}
    */
/* Image styling: Preserve original aspect ratio */
#banner .image img {
    width: 100% !important; /* Scale image to container width */
    height: auto !important; /* Maintain original aspect ratio */
    object-fit: contain !important; /* Never crop image */
    display: block !important;
    margin: 0 auto !important; /* Center image if needed */
}

/*--so not too much space between image and headline on mobile --*/


@media screen and (max-width: 480px) {
    #banner .image {
        margin: 0 0 0.8em 0 !important;
        height: auto !important; /* <-- Remove fixed height */
        max-height: none !important; /* <-- Remove max-height limit */
        min-height: 0 !important; /* <-- Remove min-height */
    }

    #banner h1 {
        margin-top: 0.2em !important;
    }
}
/**--tighten up margins around page break lines between sections --**/

hr {
    border: 0;
    border-bottom: solid 1px rgba(210, 215, 217, 0.75);
    margin: 1em 0 !important; /* You can try 0.5em if you want it even tighter */
}

    hr.major {
        margin: 1.5em 0 !important; /* If you are using .major hr's and want them to still stand out a bit */
    }