/* General banner styling */
.banner {
    width: 100%;
    height: auto;
    max-width: 1400px;
    max-height: 500px;
    margin: 0 auto;
    position: relative;
}

/* Image styling */
.banner img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Ensures the image covers the container without distortion */
}

/* Tablet view */
@media (max-width: 1024px) {
    .banner {
        max-width: 1024px;
        max-height: 366px; /* Maintains the 2.8:1 aspect ratio */
    }
}

/* Mobile view */
@media (max-width: 600px) {
    .banner {
        max-width: 560px;
        max-height: 200px; /* Maintains the 2.8:1 aspect ratio */
    }
}