/* rbf-grid-lite.css
   Minimal Bootstrap-like grid: container, row, col-12, col-md-6
*/

/* Box sizing like Bootstrap */
*, *::before, *::after{
	box-sizing: border-box;
}

/* Gutter system */
:root{
	--rbf-gutter-x: 1.5rem; /* entspricht bootstrap-ish */
	--rbf-gutter-y: 0;
}

/* Container */
.container{
	width: 100%;
	padding-right: calc(var(--rbf-gutter-x) * 0.5);
	padding-left: calc(var(--rbf-gutter-x) * 0.5);
	margin-right: auto;
	margin-left: auto;
}

/* Container max-widths (Bootstrap 5 ähnlich) */
@media (min-width: 576px){
	.container{ max-width: 540px; }
}
@media (min-width: 768px){
	.container{ max-width: 720px; }
}
@media (min-width: 992px){
	.container{ max-width: 960px; }
}
@media (min-width: 1200px){
	.container{ max-width: 1140px; }
}
@media (min-width: 1400px){
	.container{ max-width: 1320px; }
}

/* Row */
.row{
	display: flex;
	flex-wrap: wrap;
	margin-top: calc(-1 * var(--rbf-gutter-y));
	margin-right: calc(-0.5 * var(--rbf-gutter-x));
	margin-left: calc(-0.5 * var(--rbf-gutter-x));
}
.row > *{
	flex-shrink: 0;
	width: 100%;
	max-width: 100%;
	padding-right: calc(var(--rbf-gutter-x) * 0.5);
	padding-left: calc(var(--rbf-gutter-x) * 0.5);
	margin-top: var(--rbf-gutter-y);
}

/* Columns */
.col-12{
	flex: 0 0 auto;
	width: 100%;
}

@media (min-width: 768px){
	.col-md-6{
		flex: 0 0 auto;
		width: 50%;
	}
}