/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 13 Jan 2020, 17:47:50
    Author     : elea_ASA
*/

/* Settings */
:root {
  --offset-y: 10mm;
  --offset-x: 20mm;
  --max_width: 297mm;
  --columns: 6;
  --gutter: 7mm;
  --baseline: 5mm;
  --baseline-shift: 0;
  --color: hsla(204, 80%, 72%, 0.25);
  --color-text: hsla(204, 80%, 72%, 1);
}


/* Helper variables */
:root {
  --repeating-width: calc(100% / var(--columns));
  --column-width: calc((100% / var(--columns)) - var(--gutter));
  --background-width: calc(100% + var(--gutter));
  --background-columns: repeating-linear-gradient(
    to right,
    var(--color),
    var(--color) var(--column-width),
    transparent var(--column-width),
    transparent var(--repeating-width)
  );
  --background-baseline: repeating-linear-gradient(
    to bottom,
    var(--color),
    var(--color) 1px,
    transparent 1px,
    transparent var(--baseline)
  );
}

#elea.grid .card::before {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: var(--offset-y) var(--offset-x);
  width: calc(100% - (2 * var(--offset-x)));
  max-width: var(--max_width);
  height: calc(100% - (2 * var(--offset-y)));
  content: "";
  background-image: var(--background-columns), var(--background-baseline);  
  background-size: var(--background-width) 100%;
  background-position: 0 var(--baseline-shift);
  z-index: 1000;
  pointer-events: none;
  border: 1px solid var(--color-text);
}