/* **************** GRIDS ***************** */
.line, .lastUnit {overflow: hidden;_overflow:visible;_zoom:1; }
.unit{float:left;_zoom:1;}
.unitExt{float:right;}
.size1of1{float:none;}
.size1of2{width:50%;}
.size1of3{width:33.33333%;}
.size2of3{width:66.66666%;}
.size1of4{width:25%;}
.size3of4{width:75%;}
.size1of5{width:20%;}
.size2of5{width:40%;}
.size3of5{width:60%;}
.size4of5{width:80%;}
.lastUnit {float:none;_position:relative; _left:-3px; _margin-right: -3px;width:auto;}
/* extending grids to allow a unit that takes the width of its content */
.media{width:auto;}



/* GRID */
.grid { clear:both; display:grid; grid-template-columns:repeat(3, 1fr); grid-gap:10px; }
.grid > li a { display:flex; border:3px solid var(--bleu); height:100%; padding:1em; flex-direction:row-reverse; align-content:center; justify-content:center; /*flex-wrap:wrap;*/ text-align:center; line-height:1.25em; text-decoration:none; transition:0.25s all; }
.grid > li a:hover, .grid > li a:focus { border-color:var(--orange); font-weight:700; transform:translateY(-5px); box-shadow:0 10px 10px -10px; }

@media (max-width: 520px) { .grid { grid-template-columns:1fr 1fr; grid-gap:5px; } }
@media (max-width: 320px) { .grid { grid-template-columns:1fr; } }

.aside .grid { grid-template-columns:inherit; }
.aside .grid > li a:hover, .aside .grid > li a:focus { transform:inherit; font-weight:inherit; }

.aside .grid > li:nth-child(4n-3) a { border-color:var(--vert); }
.aside .grid > li:nth-child(4n-2) a { border-color:var(--orange); }
.aside .grid > li:nth-child(4n-1) a { border-color:var(--violet); }