/* grid system -- mobile first! */
.row {
    display: flex;
    flex-flow: row wrap;
  }
  
  [class*="col-"] {
    margin-left: 4%;
    flex: 0 0 92%;
  }
  
  /* Existing colors */
  .col-1 { background-color: #A3CDD9; }
  .col-2 { background-color: #FFFCE6; }
  
  /* Row 3 wide column */
  .col-3 { background-color: #F2D44B; }
  
  /* Row 4 full width */
  .col-4 { background-color: #C8C1B8; }
  
  /* Row 6 unique */
  .row-6 {
    justify-content: space-between;
    align-items: stretch;
  }
  .col-6 { background-color: #EAF2F5; }
  .row-6 .col-6 { text-align: center; }
  .row-6 .col-6 p { margin-bottom: 0; }
  
  /* Tablet */
  @media only screen and (min-width: 480px)  {
  
    .col-1, .col-2 { flex: 0 0 44%; }
  
    /* Row 3 + Row 4 stack */
    .col-3-left, .col-3, .col-4 { flex: 0 0 92%; }
  
    /* Row 5 reorder + middle becomes full width */
    .row5-b { order: -1; flex: 0 0 92%; }
    .row5-a { order: 2; }
    .row5-c { order: 3; }
  
    /* Row 6: 3 items per row */
    .col-6 { flex: 0 0 28%; }
  }
  
  /* Desktop */
  @media only screen and (min-width: 768px) {
  
    .col-1 { flex: 0 0 20%; }
    .col-2 { flex: 0 0 44%; }
  
    /* Row 3: 1 + 3 */
    .col-3 { flex: 0 0 68%; }
  
    /* Row 4: full width */
    .col-4 { flex: 0 0 92%; }
  
    /* Row 5: reset ordering on desktop */
    .row5-a, .row5-b, .row5-c { order: 0; }
  
    /* Row 6: more than 4 items across */
    .col-6 { flex: 1 0 12%; }
  }