/* columns */
.row {
	display: flex;
	flex-direction: row;
	gap: 1rem;
}
.row > * { 
	flex: 1;
}
tr.row { display: table-row; }

@media(max-width:720px){
	.row{
		flex-direction: column;
	}
}




/* Boxes */
.wrapBoxes{
	/* TO-DO */
	display: flex;
	flex-wrap: wrap;
	padding: 2rem; /* this should be in style or layout… */
	gap: 2rem;
	justify-content: center;
	flex-wrap: balance; /* in progress. polyfill…? */
}
.wrapBoxes > * {
	margin-block-end: unset; /* this should be in style or layout… */
}

/* TO-DO */
	/*
	https://css-tricks.com/intrinsically-responsive-css-grid-with-minmax-and-min/
	https://evanminto.com/blog/intrinsically-responsive-css-grid-minmax-min/
	*/
.gridBoxes {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(min( var(--minWidth, 15rem), 100%), 1fr));
	grid-auto-rows: 1fr;
}



/* DIN */
.din {
	aspect-ratio: sqrt(2) / 1;
}










/* CQ */
.sizeContainer-Width{
	container-type: inline-size;
	/* outline: 1px solid #39C9; outline-offset: -2px;; */
}