#knowledgebased-container {
    background-color: #ffff;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

#knowledgebased-container .span8 {
    flex: 2;
    min-width: 300px;
    padding: 4rem 0;
}

#knowledgebased-container .span4 {
    flex: 1;
    min-width: 250px;
    padding: 4rem 0;
}

/* Remove pull-right behavior on smaller screens */
#knowledgebased-container .span4.pull-right {
    float: none;
}

/* Mobile responsive styles */
@media (max-width: 768px) {
    #knowledgebased-container {
        flex-direction: column;
        gap: 1rem;
    }

    #knowledgebased-container .span8,
    #knowledgebased-container .span4 {
        flex: none;
        width: 100%;
        padding: 2rem 0;
    }

    /* Ensure the sidebar appears below the main content on mobile */
    #knowledgebased-container .span4 {
        order: 2;
    }

    #knowledgebased-container .span8 {
        order: 1;
    }
}

@media (max-width: 480px) {

    #knowledgebased-container .span8,
    #knowledgebased-container .span4 {
        padding: 1rem 0;
    }
}