<div id="page">
  <div class="black"></div>
  <div class="copy">
    <h1>architecture<br>en<br>france</h1>
    <p>30 januar bis 26. februar 1963<br> offnungszeiten: 10-12 und 14-18 uhr<br> mittwoch auch 20-22 uhr<br> samstag und sonntag bis 17 uhr<br> montag geschlossen - eintritt frei
    </p>
  </div>
  <p class="footnote">helmhaus zurich</p>
</div>

$col_paper: #ffe4db;
$scale: 1.5;

body {
  font-size: 100%;
  background: #f1f1f1;
  font-family: "Roboto", sans-serif;
}

#page {
  width: calc(393px * #{$scale});
  height: calc(563px * #{$scale});
  margin: 0 auto;
  background: $col_paper;
  position: relative;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  &:after {
    //red square
    content: "";
    background: #fa0f2d;
    position: absolute;
    width: calc(121px * #{$scale});
    height: calc(252px * #{$scale});
    right: 0;
    top: calc(120px * #{$scale});
  }
  &:before {
    //blue square
    content: "";
    background: #1082c9;
    position: absolute;
    width: calc(156px * #{$scale});
    height: calc(253px * #{$scale});
    left: 0;
    top: calc(120px * #{$scale});
  }
}

.black {
  position: absolute;
  width: calc(122px * #{$scale});
  height: calc(100% - calc(12px * #{$scale}));
  left: calc(150px * #{$scale});
  bottom: 0;
  top: 0;
  background: #191a15;
  &:after {
    content: "";
    position: absolute;
    width: calc(108px * #{$scale});
    height: calc(254px * #{$scale});
    background: $col_paper;
    -ms-transform: rotate(-32deg);
    transform: rotate(-31deg);
    top: calc(-139px * #{$scale});
    left: calc(51px * #{$scale});
  }
  &:before {
    content: "";
    position: absolute;
    width: calc(52px * #{$scale});
    height: calc(436px * #{$scale});
    background: $col_paper;
    top: 0;
    left: 0;
  }
}

.copy {
  position: absolute;
  left: calc(15px * #{$scale});
  top: calc(390px * #{$scale});
  z-index: 1;
  &:before {
    content: "";
    position: absolute;
    width: calc(108px * #{$scale});
    height: calc(174px * #{$scale});
    background: $col_paper;
    -ms-transform: rotate(-32deg);
    transform: rotate(-31deg);
    top: calc(32px * #{$scale});
    left: calc(62px * #{$scale});
    z-index: -1;
  }
}

h1 {
  font-weight: 500;
  font-size: calc(25px * #{$scale});
  line-height: 1;
  margin: 0;
}

p {
  font-weight: 300;
  font-size: calc(8.5px * #{$scale});
  line-height: 1.4;
}
.footnote {
  position: absolute;
  left: calc(293px * #{$scale});
  top: calc(465px * #{$scale});
  z-index: 1;
}