/* Banner optimizations for Gucci characters */

/* Main banner with king character - smaller size for better text visibility */
.main-banner {
    background-position: 90% center !important;
    background-size: 20% auto !important;
    background-repeat: no-repeat !important;
    padding-right: 0 !important;
    background-color: #000000 !important;
}

/* Secondary banner with casino character - smaller size for better text visibility */
.secondary-banner {
    background-position: 85% center !important;
    background-size: 25% auto !important;
    background-repeat: no-repeat !important;
    padding-right: 0 !important;
    background-color: #000000 !important;
}

/* Content positioning for both banners */
.main-banner .banner-content,
.secondary-banner .banner-content {
    max-width: 75%;
    z-index: 2;
    position: relative;
    padding-right: 0;
}

/* Ensure banner height accommodates characters */
.banner {
    min-height: 300px !important;
    align-items: center !important;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 1024px) {
    .main-banner {
        background-size: 25% auto !important;
        background-position: 88% center !important;
        padding-right: 0 !important;
    }
    
    .secondary-banner {
        background-size: 30% auto !important;
        background-position: 80% center !important;
        padding-right: 0 !important;
    }
    
    .main-banner .banner-content,
    .secondary-banner .banner-content {
        max-width: 70%;
    }
}

@media (max-width: 768px) {
    .main-banner {
        background-size: 30% auto !important;
        background-position: 85% center !important;
        padding-right: 0 !important;
    }
    
    .secondary-banner {
        background-size: 35% auto !important;
        background-position: 75% center !important;
        padding-right: 0 !important;
    }
    
    .main-banner .banner-content,
    .secondary-banner .banner-content {
        max-width: 65%;
    }
    
    .banner {
        min-height: 280px !important;
    }
}

@media (max-width: 480px) {
    .main-banner,
    .secondary-banner {
        background-size: 55% auto !important;
        background-position: center bottom !important;
        padding-right: 20px !important;
        padding-bottom: 160px !important;
    }
    
    .main-banner .banner-content,
    .secondary-banner .banner-content {
        max-width: 100%;
        text-align: center;
    }
    
    .banner {
        min-height: 380px !important;
        align-items: flex-start !important;
        padding-top: 30px !important;
    }
}