@media (max-width: var(--breakpoint-md)) {
    .style-guide-layout {
        flex-direction: column;
    }

    .left-panel {
        width: 100%;
        height: auto;
        position: static;
        border-bottom: 1px solid var(--border-color);
        border-radius: 0;
        margin: 0;
    }

    .main-container {
        margin-left: 0;
        margin-right: 0;
        padding-bottom: 120px; /* Space for the bottom panel */
    }

    .right-panel {
        position: fixed;
        width: 100%;
        height: auto;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        border-top: 1px solid var(--border-color);
        z-index: 20;
    }

    .right-panel .panel-body {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-4);
        padding: var(--space-4);
        transition: max-height var(--transition-base), opacity var(--transition-base);
    }

    .style-guide-layout.right-collapsed .right-panel {
        height: 60px; /* Header height */
    }
    
    .style-guide-layout.right-collapsed .right-panel .panel-body {
        display: none;
    }

    .style-guide-layout.right-collapsed .main-container {
        padding-bottom: 60px; /* Match collapsed footer height */
    }

    .style-guide-layout.right-collapsed .right-panel .panel-header .icon {
        transform: rotate(180deg);
    }

    .right-panel .panel-header .icon {
        transition: transform var(--transition-base);
    }
}