@charset "UTF-8";

/* ------------ GRID TEMPLATE ---------------------*/

body {
	display: grid;
	grid-template-columns: 32px 32px 32px 1fr 32px 32px 32px;
	grid-template-rows: 32px 1fr 0px 32px 32px;
	grid-template-areas: "top-left-margin top-left-margin top-left-margin top-margin top-right-margin top-right-margin top-right-margin"
	"left-margin menu left-gutter content right-gutter language right-margin"
	"left-margin menu left-gutter content-bottom right-gutter language right-margin"
	"bottom-left-margin bottom-left-margin bottom-left-margin footer-bottom bottom-right-margin bottom-right-margin bottom-right-margin"
	"footer footer footer footer footer footer footer";
}

@media (max-width: 480px) and (orientation: portrait) {
	body {
		grid-template-columns: 0px 0px 8px 1fr 0px 0px 4px;
		grid-template-rows: 40px 1fr 0fr 4px 32px;
	}
}

.top-margin { grid-area: top-margin; }

.top-left-margin { grid-area: top-left-margin; }

.bottom-left-margin { grid-area: bottom-left-margin; }

.bottom-right-margin { grid-area: bottom-right-margin; }

.top-right-margin { grid-area: top-right-margin; }

.footer { grid-area: footer; }

.footer-bottom { grid-area: footer-bottom; }

.footer-bottom-left { grid-area: footer-bottom-left; }

.footer-bottom-right { grid-area: footer-bottom-right; }

.left-margin { grid-area: left-margin; }

.right-margin { grid-area: right-margin; }

.language { grid-area: language; }

.menu { grid-area: menu; }

.left-gutter { grid-area: left-gutter; }

.right-gutter { grid-area: right-gutter; }

.content { grid-area: content; }

.content-bottom { grid-area: content-bottom; }