@layer page {

  .sec--home {
    margin-block: 4rem;
  }

  .ctn--collage {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }

  .areaOne img,
  .areaFour img {
    width: 100%;
    height: auto;
    vertical-align: top;
  }

  .areaOne {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }

  .areaThree {
    background-color: green;
  }

  .areaSeven {
    background-color: red;
  }

  .areaEight {
    background-color: orange;
  }

  .areaNine {
    background-color: purple;
  }

  .areaTen {
    background-color: turquoise;
  }

  .areaEleven {
    background-color: yellow;
  }

  .areaTwelve {
    background-color: blue;
  }

}