.full-width-table table {
  width: 100%;
}

.full-width-table img {
  width: 100%;
  height: auto;
}

/* Two-column diagram layout: label paragraphs on row 1, diagrams on row 2,
   auto-flowing into a 2-col grid. Reusable across pages that need to compare
   two diagrams side by side. Defaults to even columns; add the modifier
   class below when one diagram is meaningfully more complex. */
.two-col-diagram-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.5em;
  align-items: start;
}

/* Modifier: widen the right column when it holds a more complex diagram
   (e.g. the VLAN core diagram, which has 3 branches vs the physical core's 1). */
.two-col-diagram-grid.wide-right {
  grid-template-columns: 3fr 5fr;
}

.two-col-diagram-grid > p {
  margin: 0 0 0.5em 0;
  padding-bottom: 0.4em;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid var(--color-background-border, #ddd);
}

.two-col-diagram-grid pre.mermaid,
.two-col-diagram-grid .mermaid-container {
  width: 100%;
}