/*
Copyright 2021 3G GmbH

3G GmbH with ❤ Informationssysteme in der Automatisierungstechnik | www.3ggmbh.de | www.3g-broker.de 

© 2011 @ si²ta > smart · intelligent · information · technologies · in automation

responsives Grid-System
*/
/* beschreibende Variablen für Anpassungen */
:root {
--grid-breite : 700px;	/* 500 */
}

/* Beschreibung des responsiven GRID-Systems */
.grid {
	display: grid;
	grid-gap: 10px;  /* Abstand zwischen den Panels */
	grid-template-columns: repeat(auto-fit, minmax(var(--grid-breite), 1fr));  												/* Umbrechen, sobald die Box die eingestellte Breite überschritten hat */
}
@media screen and (max-width: 520px) {																						/* für Mobiles auch Chrome auf PC wenn minimale Breite 520 */
	.grid {
		display: grid;
		grid-gap: 20px;  /* Abstand zwischen den Panels */
		grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));														/* Umbrechen, sobald die Box 100% Breite hat 350 */
	}
}	

/* ein DIV im responsiven GRID-Systems = Panel */
.grid div {
	/* background: white; */
	/* border: 2px solid white; wir wollen keine Ränder, Design gelöst über Hintergundfarbe, Panelfarbe */
	border : 0;
	border-radius: 5px;
	color: black;
/*		margin: 1vw 2vw;	gelöst über grid-gap am .grid */
/*		padding: 1vw;	nur im inneren DIV, hier weglassen wegen "randlosen Bildern" */	
	font-size: calc(16px + 4 * ((200vmax - 320px) / (1920 - 320)));
}
/* ein DIV im DIV im Panel */
.grid div div {
	background: transparent;
	/* border: 2px solid white; */
	border : 0;
	border-radius: 5px;
	color: black;
/*		margin: 1vw 2vw;	/* Abstände zum nächsten */	
	padding: 1vw;		/* einrücken oben,unten, seitlich */
}
/* ein SPAN im DIV im DIV im Panel */
.grid div div span {
	display: inline-block;
	font-size : 80%;
}
/* ein ABSATZ im DIV im DIV im Panel */
.grid div div p {
	display: inline-block;
	font-size : 80%;
}