/**
	 * @prop --gradient: The main gradient
	 * @prop --transform: The transform
	 * @prop --block-grid-area-1: Grid area of a block, up to the 5th. For more use parts
	 * @prop --block-color-1: Color of a block, up to the 5th. For more use parts
	 * @prop --block-grid-area-2: Grid area of a block, up to the 5th. For more use parts
	 * @prop --block-color-2: Color of a block, up to the 5th. For more use parts
	 * @prop --block-grid-area-3: Grid area of a block, up to the 5th. For more use parts
	 * @prop --block-color-3: Color of a block, up to the 5th. For more use parts
	 * @prop --block-grid-area-4: Grid area of a block, up to the 5th. For more use parts
	 * @prop --block-color-4: Color of a block, up to the 5th. For more use parts
	 * @prop --block-grid-area-5: Grid area of a block, up to the 5th. For more use parts
	 * @prop --block-color-5: Color of a block, up to the 5th. For more use parts
	*/
:host {
  padding: 0;
  margin: 0;
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100vh;
}

div {
  height: 100%;
  transform: var(--transform, skewY(-5deg));
  transform-origin: 0;
  background: var(--gradient, linear-gradient(150deg, #53f 15%, #05d5ff 70%, #a6ffcb 94%));
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
}
div :nth-child(1) {
  grid-area: var(--block-grid-area-1, 1/1/span 4/span 2);
  background-color: var(--block-color-1, #53f);
}
div :nth-child(2) {
  grid-area: var(--block-grid-area-2, 1/3/span 3/span 2);
  background-color: var(--block-color-2, #4553ff);
}
div :nth-child(3) {
  grid-area: var(--block-grid-area-3, 1/5/span 2/span 2);
  background-color: var(--block-color-3, #4f40ff);
}
div :nth-child(4) {
  grid-area: var(--block-grid-area-4, 3/11/span 3/span 2);
  background-color: var(--block-color-4, #0dcfff);
}
div :nth-child(5) {
  grid-area: var(--block-grid-area-5, 8/1/span 5/span 4);
  background-color: var(--block-color-5, #1fa2ff);
}