/* Common styles for banner images */
.banner1-image, .banner2-image {
    width: 100%;
    position: relative;
    overflow: hidden; /* Ensure images do not overflow the container */
}

.banner1-image img, .banner2-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px; 
    object-fit: cover;
}

/* Media query for smaller screens */
@media screen and (max-width: 768px) {
    .banner1-image img, .banner2-image img {
        height: auto;
        width: 100%;
        max-height: 300px;
    }
}