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

.fourcol-split-row-12--12--5-7 {

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

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

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

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

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

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