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

.fourcol-split-row-12--8-4--12 {

  // Two active regions.
  .hr--2-3 {
    .l-r {
      &:first-child {
        width: span(8 of 12);
      }

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

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

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

  .hr--2-3-4 {
    .l-r {
      &:first-child {
        width: span(8 of 12);
      }

      &:nth-child(2) {
        width: span(4 of 12);
      }
    }
  }

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

      &:nth-child(3) {
        width: span(4 of 12);
      }
    }
  }
}