* {
  margin: 0;
  padding: 0;
}
body {
  color: #fff;
  font-family: "Courier New";
  text-align: center;
}
#content {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(150px, auto);
  grid-gap: 10px;
  max-width: 960px;
  margin: 0 auto;
}
#content div {
  background: #333;
  padding: 30px;
}
.one {
  grid-column: 1/3;
  grid-row: 1/5;
}
.two {
  grid-column: 3/7;
  grid-row: 1/3;
}
.three {
  grid-column: 3/5;
  grid-row: 3/5;
  background: red !important;
}
.four {
  grid-column: 5/7;
  grid-row: 3/7;
}
.five {
  grid-column: 1/5;
  grid-row: 5/7;
}
#content {
  transform: rotate(45deg) scale(0.4);
}
@media (max-width: 768px) {
  #content {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: (auto, auto);
  }
}