/* Responsive plot container: side-by-side on wide screens, stacked on narrow screens */
.responsive-plot-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    gap: 0px;
}

.responsive-plot-container > .dash-graph {
    flex: 1 1 50%;
    min-width: 300px;
    max-width: 100vw;
    box-sizing: border-box;
}

/* Switch to vertical stacking at a more appropriate width (e.g., 1200px) */
@media (max-width: 1200px) {
    .responsive-plot-container {
        flex-direction: column;
        flex-wrap: nowrap;
    }
    .responsive-plot-container > .dash-graph {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100vw;
    }
}