.content .two-pane, body .content .two-pane, .two-pane {
  display: flex !important;
  gap: 1rem !important;
  width: 100% !important;
  flex-direction: row !important; /* default: side-by-side (landscape/wide) */
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
}

.content .two-pane > .pane, .two-pane > .pane, body .content .two-pane > .pane {
  flex: 1 1 50% !important;
  min-width: 0 !important; /* allow flex items to shrink correctly */
  box-sizing: border-box !important;
}

/* Portrait orientation or small screens: stack panes vertically */
@media (orientation: portrait), (max-width: 767.98px) {
  .content .two-pane, body .content .two-pane, .two-pane {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }
  .content .two-pane > .pane, .two-pane > .pane {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}

/* Ensure inner elements do not force overflow */
.two-pane .pane > *,
.two-pane .pane .network-article,
.two-pane .pane div.network-article {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/**/
/* Base container setup */
.container {
    container-type: size;
    container-name: layoutBox;
    display: flex;
    flex-direction: column; /* Default: portrait layout */
    gap: 1rem;
    padding: 1rem;
    border: 2px solid #ccc;
}

    /* Content blocks */
    .container > .content {
        flex: 1;
        padding: 1rem;
        background-color: #f0f0f0;
        border-radius: 8px;
    }

/* Landscape layout: side-by-side */
@container layoutBox (width > height) {
    .container {
        flex-direction: row;
    }
}
/**/

/* Provide minimal visual aid while debugging (can be removed) */
.two-pane .pane.pane-primary { outline: 1px solid rgba(255,255,255,0.03) !important; }
.two-pane .pane.pane-secondary { outline: 1px solid rgba(255,255,255,0.02) !important; }