CSS/HTML Sandbox

* { box-sizing: border-box;
}
.grid {
  display: grid;
  margin: auto;
  border: 1px solid #CE454F;
  padding: 5px;
  border-radius: 10px;
  width: 90%;
  max-width: 700px;  
  grid-template-columns: 2fr 4fr 1fr 1fr 2fr;
  grid-template-rows: 100px 100px 100px 100px;
  grid-gap: 4px;
  align-items: start;
  justify-items: end;
  direc tion: rtl;
  writing-m ode: vertical-rl;
  transform: scale(.8) rotate(-15deg) 
  translate(0px, -0px) skew(0deg, 0deg);
}
.grid > * {
  box-sizing: border-box;
  border: 5px solid #526683;
  border-radius: 10px;
  background-color: #89A4BE;
  padding: 10px;
  width: 100%;
  height: 100%;
}

header {
  grid-column: 1/-1;
  grid-row: 1 / -3 ;
  background: Yellow!important
}
header h1 {
  font-size: 15vw; line-height: 10px;
}
.one {
  grid-column: 1;
  grid-row: 3 / 4;
  background: hsla(0,100%,40%,1);
  }
.two {
  grid-column: 1 ;
  grid-row: 4 / 5;
  background: hsla(300,100%,30%,1);
}
.three{
  grid-column: 2 / 4;
  grid-row: 3 / 5;
  background: hsla(100,100%,30%,1);
}
.four {
  grid-column: 3 / -1;
  grid-row: 4 / 5;
  background: hsla(200,100%,50%,.5);
}
.five {
  grid-column: 5 ;
  grid-row: 2 / 4;
  background: hsla(34,100%,50%,.5);
}
@media (max-width: 568px) {
	.grid {display: block;}
}    
@media (min-width: 800px) {
	header h1 {font-size: 130px;}
}