:root{
	--canvas-width: 50em;
  --row-height: 15em;
  --slant-offset: 5em;
  --pannel-gap: 0.5em;
  --pannel-padding: 2em;
}

body{
	background-color: #222;
  color: #fff;
}

.box{
	background-color: #0f0;
  color: #000;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.full-width{
	width: var(--canvas-width);
  height: calc(var(--row-height)*1.5);
  margin: var(--pannel-gap);
}

.one-third{
	width: calc((var(--canvas-width) / 3) - var(--pannel-gap));
  height: var(--row-height);
  margin: var(--pannel-gap);
}

.two-third{
	width: calc(((var(--canvas-width) * 2) / 3) - var(--pannel-gap));
  height: var(--row-height);
  margin: var(--pannel-gap);
}

.half{
	width: calc((var(--canvas-width) / 2) - var(--pannel-gap));
  height: var(--row-height);
  margin: var(--pannel-gap);
}

.right{
  float: right;
}

.left{
  float: left;
}

.slashed-half-left{
	width: calc(((var(--canvas-width) - (var(--pannel-gap) * 3)) / 2) + var(--slant-offset));
  height: var(--row-height);
  
  margin: var(--pannel-gap);
  margin-right: calc(var(--slant-offset) * -1);
  background-color: blue;
  
  clip-path: polygon(100% 100%, 0% 100%, 0% 0%, calc(((((var(--canvas-width) - (var(--pannel-gap) * 3)) / 2))) - var(--slant-offset)) 0%);
  
  &.poly-padding{
    
  }
}

.slashed-half-right{
	width: calc(((var(--canvas-width) - (var(--pannel-gap) * 3)) / 2) + var(--slant-offset));
  height: var(--row-height);
  
  margin: var(--pannel-gap);
  margin-left: calc(var(--slant-offset) * -1);
  
  clip-path: polygon(100% 100%, calc(var(--slant-offset) * 2) 100%, 0% 0%, 100% 0%);
  
	&.poly-padding{
    
  }
}

.multibox-row{
	width: calc(var(--canvas-width) + (var(--pannel-gap) * 2));
  height: calc(var(--row-height) + (var(--pannel-gap) * 2));
}

.multibox-row:after{
	content: "";
  display: table;
}

.BG1{
	background-image: url("https://projects.codecraftworks.com/web/6HwIViSJVxtu0gkyARD8/assets/Duck-pond.png");
  background-size: calc(var(--canvas-width) * 0.66);
  background-position: top;
}

.BG2{
	background-image: url("https://projects.codecraftworks.com/web/6HwIViSJVxtu0gkyARD8/assets/Duck-pond-sub1.png");
  background-size: calc(var(--canvas-width) * 0.66);
  background-position: bottom;
}

.BG3{
	background-image: url("https://projects.codecraftworks.com/web/6HwIViSJVxtu0gkyARD8/assets/Duck-pond-sub2.png");
  background-size: calc(var(--canvas-width) * 0.66);
  background-position: right;
}

.BG4{
	background-image: url("https://projects.codecraftworks.com/web/6HwIViSJVxtu0gkyARD8/assets/Duck-duck.png");
  background-size: var(--canvas-width);
  background-position: top;
}

.text-box-tl{
	background-color: white;
  border: double black 4px;
  max-width: 10em;
  grid-row: 1;
  grid-column: 1;
  margin: 1em;
  padding: 0.5em;
}

.text-box-br{
  background-color: white;
  border: double black 4px;
  max-width: 10em;
  grid-row: 3;
  grid-column: 3;
  margin: 1em;
  padding: 0.5em;
}

.text-box-tr-ex{
  background-color: white;
  border: solid black 4px;
  border-radius: 50%;
  text-align: center;
  font-size: 3em;
  max-width: 10em;
  grid-row: 1;
  grid-column: 3;
  margin: 1em;
  padding: 0.5em;
}