@media screen {
  section {
    display: grid;
    grid-template-columns: var(--square) 7fr var(--square) 3fr var(--square);
    /* grid-template-rows: var(--square) auto var(--square); */
    grid-template-rows: var(--square) calc(100vh - calc(var(--square) * 2)) var(--square);

    overflow: hidden;
  }

  section:is(.content, .web2print) {
    grid-template-rows: var(--square) calc(100vh - calc(var(--square) * 2)) var(--square);
  }

  main {
    grid-area: main;
    overflow-y: scroll;
  }

  .empty-column {
    grid-area: empty-column;
  }

  .empty-footer {
    grid-area: empty-footer;
  }

  .empty-side-footer {
    grid-area: empty-side-footer;
  }

  /* content ---------------------------------------- */
  section.content {
    grid-template-areas:
      "square1  tabs square2 . . "
      "empty-column main nav nav nav"
      "square3 empty-footer square4 empty-side-footer square5";
  }



  section.content nav.side {
    grid-area: nav;
  }

  section.content nav.tabs {
    grid-area: tabs
  }

  section.content main {
    /* display: grid;
    grid-template-columns: var(--square) 7fr;
    grid-auto-rows: minmax(min-content, auto); */
    grid-area: main;
  }

  section.content .text-content {
    /* grid-column: 2; */
  }

  section.content>.square:nth-of-type(1) {
    grid-area: square1;
  }

  section.content>.square:nth-of-type(2) {
    grid-area: square2;
    background-color: unset;
    border-right: solid var(--border-width) var(--brown);
    border-left: solid var(--border-width) var(--brown);
  }

  section.content>.square:nth-of-type(3) {
    grid-area: square3;
  }

  section.content>.square:nth-of-type(4) {
    grid-area: square4;
  }

  section.content>.square:nth-of-type(5) {
    grid-area: square5;
  }

  /* web2print ---------------------------------------- */
  section.web2print {
    grid-template-areas:
      "square1 header side-content-header side-content-header . "
      "empty-column main  side-content  side-content side-content"
      "square2 empty-footer square3 empty-side-footer square4";
  }
  section.web2print {
    color: var(--brown);
  }

  section.web2print header{
    grid-area: header;
    display: flex;
  }

  section.web2print header h2{
    grid-area: header;

  }
  section.web2print .side-content{
    overflow: scroll;
  }

  section.web2print>.square:nth-of-type(1) {
    grid-area: square1;
    background-color: unset;
    border-right: solid var(--border-width) var(--brown);
    /* border-bottom: solid var(--border-width) var(--brown); */
  }

  section.web2print>.square:nth-of-type(2) {
    grid-area: square2;
  }

  section.web2print>.square:nth-of-type(3) {
    grid-area: square3;
  }

  section.web2print>.square:nth-of-type(4) {
    grid-area: square4;
  }

  /* ours & home ---------------------------------------- */
  section:is(.ours, .home) {
    grid-template-areas:
      "square4 header side-content-header side-content-header side-content-header"
      "empty-column main side-content side-content side-content"
      "square1 empty-footer square2 empty-side-footer square3";
  }

  section:is(.ours, .home)>.square {
    border-top: solid var(--border-width) black;
    border-left: solid var(--border-width) black;
    border-right: solid var(--border-width) black;

  }


  section.home>.square:nth-of-type(1) {
    grid-area: square1;
  }
  section.home>.square:nth-of-type(5) {
    position: absolute;
    top: var(--square);
    left: var(--square);
    background-color: var(--green);
    width: var(--square);
    height: var(--square);
    border-top: solid 0px black;
    border-left: solid 0px black;
    border-right: solid 0px var(--grey);

  }

  section.home>.square:nth-of-type(6) {
    border-top: solid 0 var(--grey);
    border-left: solid 0 var(--grey);
    border-right: solid var(--border-width) var(--grey);
  }

  section.home>.square:nth-of-type(7) {
    background-color: var(--violet);
    border-top: solid var(--border-width) var(--grey);
    border-left: solid var(--border-width) var(--grey);
    border-right: solid 0px black;
  }


  section.home>.square:nth-of-type(8) {
    border-top: solid var(--border-width) var(--grey);
    border-left: solid 0px var(--grey);
    border-right: solid 0px black;
  }
  section.home>.square:nth-of-type(4) {
    grid-area: square4;
    background-color: var(--violet);
    border-top: solid 0px black;
    border-left: solid 0px black;
    border-right: solid var(--border-width) var(--grey);
  }

  section.home>.square-absolute{
    position: absolute;
    width: var(--square);
    height: var(--square);
  }
  section.home>.square-absolute:nth-of-type(9){
    background-color: var(--violet);
    top: 25.5vh;
    left: 91vw;
  }

  section.home>.square-absolute:nth-of-type(10){
    background-color: var(--green);
    top: calc(25.5vh + var(--square));
    left: calc(91vw + var(--square));
  }



  section:is(.ours, .home) header {
    grid-area: header;
    /* display: flex; */
  }

  section:is(.ours, .home) header>div {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
  }

  .side-content {
    grid-area: side-content;
  }

  .side-content-header {
    grid-area: side-content-header;
  }

  /* colors & background colors ---------------------------- */
  section.content .square, section.ours, section.home {
    background-color: var(--brown);
  }

  section.ours {
    color: var(--green);
  }

  section.web2print {
    background-color: var(--green);
  }

  section.web2print .square {
    background-color: var(--brown);
  }

  /* borders ---------------------------------------- */
  section.content nav.side>ol>li:first-of-type {
    border-top: unset;
  }

  section:is(.ours, .home) :is(main, .empty-column, .side-content) {
    border-top: solid var(--border-width) black;
  }

  section.home :is(main, .empty-column, .side-content)  {
    border-top: solid var(--border-width) var(--grey);
  }


  section:is(.ours, .home) :is(.empty-column) {
    border-right: solid var(--border-width) black;
  }

  section.home :is(.empty-column) {
    border-right: solid var(--border-width) var(--grey);
  }

  section:is(.ours) :is(.side-content, .side-content-header) {
    border-left: solid var(--border-width) black;
  }

  section:is(.home) :is(.side-content, .side-content-header) {
    border-left: solid var(--border-width) var(--grey);
  }

  section:is(.web2print) :is(.side-content, .side-content-header) {
    border-left: solid var(--border-width) var(--brown);
  }

  section:is(.web2print) :is(.side-content) {
    border-top: solid var(--border-width) var(--brown);
  }

  section.content :is(.empty-column, nav.side) {
    border-left: solid var(--border-width) var(--brown);
  }

  section:is(.content, .web2print) :is(main, nav.side, .empty-footer, .empty-column, .empty-side-footer) {
    border-top: solid var(--border-width) var(--brown);
  }

  section:is(.ours) :is(.empty-footer, .empty-side-footer) {
    border-top: solid var(--border-width) black;
  }

  section:is(.home) :is(.empty-footer, .empty-side-footer) {
    border-top: solid var(--border-width) var(--grey);
  }

  section:is(.content, .web2print) :is(.empty-column) {
    border-right: solid var(--border-width) var(--brown);
  }
}