/* ArchGrid 1.0 - A modular, flexible & responsive CSS-based grid framework		*/
/* Copyright 2021 by By Jérôme VADON - jerome@vadon.fr							*/
/* ArchGrid is released under the GPL											*/
/* This program is free software; you can redistribute it and/or modify			*/
/* it under the terms of the GNU General Public License as published by			*/
/* the Free Software Foundation; either version 3 of the License, or			*/
/* (at your option) any later version.											*/
/*																				*/
/* This program is distributed in the hope that it will be useful,				*/
/* but WITHOUT ANY WARRANTY; without even the implied warranty of				*/
/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the				*/
/* GNU General Public License for more details.									*/
/*																				*/
/* You should have received a copy of the GNU General Public License			*/
/* along with this program; if not, write to the Free Software					*/
/* Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA	*/

/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=	*/

.archGrid {
  height: 100%;
  margin: 0;
  display: grid;
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(var(--archG-Col), 1fr);
  grid-auto-flow: row;
  --archG-gMax:5;
  --archG-gStp:0.5;
  --archG-gRef:1em;
  column-gap: calc((var(--archG-gMax) - (var(--archG-Col) * var(--archG-gStp))) * var(--archG-gRef));
  row-gap: calc((var(--archG-gMax) - (var(--archG-Col) * var(--archG-gStp))) * var(--archG-gRef));
}

.card {
  /* border:3px solid; */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "header header"
    "title title"
    "media media"
    "content content"
    "option option";
}

.archGrid[data-col="1s"]  > .card {
   grid-template-columns: 1fr 4fr; 
 grid-template-rows: 1fr 1fr 1fr 1fr; 
  grid-template-areas: 
    "header header"
    "media title"
    "media content"
    "media option"; 
}

.archGrid[data-col="1"]  > .card {
  grid-template-columns: 1fr 2fr; 
  grid-template-rows: 1fr 1fr 1fr 1fr; 
  grid-template-areas: 
    "header header"
    "media title"
    "media content"
    ". option"; 
}

.archGrid[data-col="1x"]  > .card {
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr 1fr 1fr 1fr; 
  grid-template-areas: 
    "header header"
    "media title"
    "media content"
    "media option"; 
}

.archGrid[data-col="3"]  > .card {
  border-color: blue;
}

.archGrid[data-col="5"]  > .card {
  border-color: green;
}

.header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". .";
  grid-area: header;
}

.title {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "."
    ".";
  grid-area: title;
}

.media { grid-area: media; }

.content { grid-area: content; }

.option { grid-area: option; }



/* For presentation only, no need to copy the code below */
/*
html, body {
  height: 100%;
  margin: 0;
}

.archGrid * {
  border: 1px solid green;
  position: relative;
}
.archGrid {
  background-color:rgb(194 24 91 / 25%);
}

.archGrid > div {
  border: 3px solid red;
  background-color:rgb(255 255 255 / 100%);
  position: relative;
  min-height:1rem;
}

.archGrid *:after {
  content:attr(class);
  font-weight:700;
  line-height:1rem;
  text-transform:uppercase;
  position: absolute;
  top: 0;
  right: 1rem;
  left: unset;
  font-size:0.5rem;
  display: grid;
  align-items: center;
  justify-content: center;
  padding:0.5rem 0.25rem;
}

.archGrid > *:after {
  right: unset;
  left: 1rem;
  font-size:1rem;
}
 */