/* Ensure next box is always partially visible */
@media (max-width: 768px) {
    /* Calculate box width to always show part of next box */
    .predplatne-boxes .predplatne-box {
        /* 85% of viewport width to always show part of next box */
        flex: 0 0 calc(85vw - 20px) !important;
        width: calc(85vw - 20px) !important;
        min-width: 260px !important; /* minimum reasonable size */
        max-width: 300px !important; /* maximum reasonable size */
    }
    
    /* For smaller screens, adjust the calculation */
    @media (max-width: 380px) {
        .predplatne-boxes .predplatne-box {
            flex: 0 0 calc(82vw - 20px) !important;
            width: calc(82vw - 20px) !important;
            min-width: 240px !important;
            max-width: 280px !important;
        }
    }
    
    /* For very small screens */
    @media (max-width: 320px) {
        .predplatne-boxes .predplatne-box {
            flex: 0 0 calc(80vw - 15px) !important;
            width: calc(80vw - 15px) !important;
            min-width: 220px !important;
            max-width: 260px !important;
        }
    }
    
    /* Ensure proper spacing */
    .predplatne-boxes {
        gap: 12px !important; /* slightly smaller gap */
        padding-left: 15px !important;
        padding-right: 15px !important;
        scroll-padding-left: 15px !important;
    }
}