@import "../page-layout-base";
//
// Four Regions 12--9-3--12
//
// Double split row type layout. This layout splits 4 regions over 3 rows.
//
// Appearance:
//
//   -------------------------------------
//  | First (12)                          |
//  |-------------------------------------|
//  | Second (12)                         |
//  |-------------------------------------|
//  | Third (6)        |  Fourth (6)      |
//   -------------------------------------
//  Key: region (grid columns)
//
// ---------------------------------------------------------------------------

.fourcol-split-row-12--12--6-6 {

  // Two active regions.
  .hr--3-4 {
    .l-r {
      width: span(6 of 12);
    }
  }

  // Three active regions.
  .hr--1-3-4,
  .hr--2-3-4 {
    .l-r {
      &:nth-child(2) {
        width: span(6 of 12);
      }

      &:last-child {
        width: span(6 of 12);
      }
    }
  }

  // Four active regions.
  .arc--4 {
    .l-r {
      &:nth-child(3) {
        width: span(6 of 12);
      }

      &:last-child {
        width: span(6 of 12);
      }
    }
  }
}