:root{
  --logow:200px;
  --logomr:20px;
  --clr-brand:#1F6D78;
  --chartw:1500px;
  --spacing:40px;
  --lwr-cell:120px;
  --prn-cell-height:75mm;
}

html{box-sizing:border-box}
*,*:before,*:after{box-sizing:inherit}
body{margin:0;padding:0;font-family:'Open Sans',sans-serif;font-size:16px}

@page{size:auto;margin:23mm 25mm 0mm 25mm}

/* Main Container */
main{
  margin:var(--spacing) auto var(--spacing);
  padding:50px;
  width:var(--chartw);
  min-width:var(--chartw);
}
@media print{
  main{
    margin:10mm 20mm 0mm;
    padding:0;
    width:100%;
  }
}
/* END Main Container */

/* Main Header */
main header{
  display:flex;
  align-items:center;
}

main header .logo{
  width:var(--logow);
  margin-right:var(--logomr);
}
.logo img{width:100%}
@media print{
  main header .logo{width:30mm}
}

main header .headline{
  width:calc(100% - var(--logomr) - var(--logow));
}

h1{
  margin:0;
  font-size:5.5rem;
  font-weight:800;
  letter-spacing:-2.5px;
  line-height:1.0;
  color:var(--clr-brand);
}
@media print{
  h1{font-size:4.0rem}
}

/* END Main Header */

/* Chart */

.chart{
  margin-top:var(--spacing);
  padding:var(--spacing);
  width:100%;
  display:flex;
  flex-wrap:wrap;
  align-content:space-between;
  gap:var(--spacing);
  background-color:rgba(80,117,164,0.1);
  outline:1px solid var(--clr-brand);
}
.cell{
  width:calc((var(--chartw) / 3) - 87px);
  height:calc((var(--chartw) / 3) - 87px);
  background-color:white;
  outline:1px solid var(--clr-brand);
}
@media print{
  .chart{
    padding:7.5mm;
    width:calc(100% - 125mm);
  }
  .cell{
    width:calc(33.333% - 7.5mm);
    height:var(--prn-cell-height);
  }
}
.upper,
.lower{
  padding:10px 15px;
}
.upper{
  height:calc(100% - var(--lwr-cell));
}
.upper img{display:block;margin:0 auto;height:100%}
.lower{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  height:var(--lwr-cell);
  color:white;
  background-color:var(--clr-brand);
}
.lower h2{width:100%;margin:0;font-weight:800;font-size:1.333rem;line-height:1.1;text-align:center}
.lower h2 span{display:inline-block;width:100%;font-weight:600;font-size:1.1rem;text-align:center}

@media print{
  .upper{
    height:calc(var(--prn-cell-height) * 0.7);
  }
  .lower{
    height:calc(var(--prn-cell-height) * 0.3);
  }
}
/* EDN Chart */

/* Footer */
footer{
  display:flex;
  justify-content:space-between;
  margin-top:0.75rem;
  width:100%;
  font-size:0.8rem;
  color:#5075A4;
}
.fright{text-align:right}
@media print{
  footer{
    display:block;
    margin-top:2mm;
    width:100%;
  }
  .fleft,
  .fright{
    display:inline-block;
    width:33%
  }
  /* .fleft{background-color:#fee} */
  .fright{text-align:right}/* ;background-color:#eef} */
}
/* END Footer */