/* Drag-and-drop grid — structural only (no colours/tokens). HubSpot dnd_area output
   is a 12-column grid of .row-fluid > .widget-span.spanN; this gives those classes
   their widths so marketer-built column layouts render, and stacks them on mobile.
   Sections stay full-bleed (no max-width here) so each section module's own
   .vn-section background spans edge to edge, with .vn-container handling inner width. */

.row-fluid-wrapper,
.row-fluid {
  width: 100%;
}

.row-fluid {
  display: flex;
  flex-wrap: wrap;
}

.row-fluid > .widget-span {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-height: 1px;
}

.row-fluid .span12 { width: 100%; }
.row-fluid .span11 { width: 91.6666%; }
.row-fluid .span10 { width: 83.3333%; }
.row-fluid .span9  { width: 75%; }
.row-fluid .span8  { width: 66.6666%; }
.row-fluid .span7  { width: 58.3333%; }
.row-fluid .span6  { width: 50%; }
.row-fluid .span5  { width: 41.6666%; }
.row-fluid .span4  { width: 33.3333%; }
.row-fluid .span3  { width: 25%; }
.row-fluid .span2  { width: 16.6666%; }
.row-fluid .span1  { width: 8.3333%; }

@media (max-width: 767px) {
  .row-fluid > .widget-span {
    width: 100%;
  }
}