/* assets/css/banners.css - Responsive banner styles */

/* Large banners - shown on desktop (1250x100px) */
.banner-large {
    width: 100%;
    max-width: 1250px;
    height: 100px;
    margin: 0 auto;
}

.banner-large img {
    width: 100%;
    height: 100px;
    object-fit: cover;
}

/* Tablet banners - shown on tablets (768x100px) */
.banner-tablet {
    width: 100%;
    max-width: 768px;
    height: 100px;
    margin: 0 auto;
}

.banner-tablet img {
    width: 100%;
    height: 100px;
    object-fit: cover;
}

/* Mobile banners - shown on mobile devices (320x100px) */
.banner-mobile {
    width: 100%;
    max-width: 320px;
    height: 100px;
    margin: 0 auto;
}

.banner-mobile img {
    width: 100%;
    height: 100px;
    object-fit: cover;
}

/* Small banners - shown on all devices (365x400px) */
.banner-small {
    width: 100%;
    max-width: 365px;

    margin: 0 auto;
}

.banner-small img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

/* Banner text overlay */
.banner-text {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 14px;
}

.banner {
    position: relative;
    display: block;
}

/* Responsive behavior using Bootstrap classes */
/* Large banners - visible only on large screens (lg and up) */
.banner-large {
    display: none;
}

.d-lg-block .banner-large {
    display: block;
}

/* Tablet banners - visible only on medium screens (md only) */
.banner-tablet {
    display: none;
}

.d-md-block.d-lg-none .banner-tablet {
    display: block;
}

/* Mobile banners - visible only on small screens (sm and down) */
.banner-mobile {
    display: none;
}

.d-lg-none .banner-mobile {
    display: block;
}

/* Small banners - visible on all screen sizes */
.banner-small {
    display: block;
}