/* --- SIDEBAR LAYOUT (float-based) --- */

.rsl-sidebar-layout {
    /* Contain the float(s) so the parent height wraps them */
    overflow: auto; 
    margin-bottom: 2rem;
}

/* Left sidebar (also used by the single-left example) */
.rsl-sidebar,
.rsl-sidebar-left {
    float: left;
    width: 230px;
    background: #008CA8;
    color: #fff;
    padding: 1rem;
    margin-right: 2rem;
    border-radius: 6px;
}

/* Right sidebar */
.rsl-sidebar-right {
    float: right;
    width: 230px;
    background: #008CA8;
    color: #fff;
    padding: 1rem;
    margin-left: 2rem;
    border-radius: 6px;
}

.rsl-sidebar h2,
.rsl-sidebar-left h2,
.rsl-sidebar-right h2 {
    margin-top: 0;
}

/* main content that sits NEXT TO one or more sidebars */
/* normal blocks; width becomes container minus floated sidebars */

.rsl-main-with-sidebar,
.rsl-main-with-both {
    padding-top: 0.5rem;
}


/* content that should be FULL WIDTH BELOW the sidebar(s) */
.rsl-below-sidebar {
    clear: both;      /* start below all floats */
    margin-top: 2rem;
}

/* mobile stacking */
@media (max-width: 768px) {
    .rsl-sidebar,
    .rsl-sidebar-left,
    .rsl-sidebar-right {
        float: none;
        width: auto;
        margin-right: 0;
        margin-left: 0;
        margin-bottom: 1rem;
    }

    .rsl-main-with-sidebar,
    .rsl-main-with-both,
    .rsl-below-sidebar {
        clear: none;
    }
}