/*
	CSS
	min-width   Layout URL
	Initial:    https://grid.layoutit.com/?id=0oPEVaL
	960px:      https://grid.layoutit.com/?id=YphkChz
*/

/* Start Grid Layout */

.app-grid-container {
	display: grid;
	gap: 0 0;
	grid-template-columns: 1fr 16px 1fr 16px 1fr 16px 1fr;
	grid-template-rows: auto 12px auto 12px auto 12px auto;
}

.app-page-title {
	grid-area: 1/1/2/8;
}

.app-annc-info {
	grid-area: 3/1/4/8;
}

.app-main-content {
	grid-area: 5/1/6/8;
}

.app-sidebar {
	grid-area: 7/1/8/8;
}



/* End Grid Layout */

.app-grid-container {
	border-top: 0;
	margin: 12px;
	width: 100%;
}

.app-page-title, .app-annc-info, .app-main-content, .app-sidebar {
	margin-right: 24px;
}

/* Start 960px width Layout */

@media screen and (min-width: 960px) {
	/* Start Grid Layout */
	.app-grid-container {
		display: grid;
		gap: 0 0;
		grid-template-columns: 1fr 16px 1fr 16px 1fr 16px 1fr;
		grid-template-rows: auto 12px auto 12px 1fr 12px auto;
	}

	.app-page-title {
		grid-area: 1/1/2/6;
	}

	.app-annc-info {
		grid-area: 1/7/4/8;
	}

	.app-main-content {
		grid-area: 3/1/8/6;
	}

	.app-sidebar {
		grid-area: 5/7/8/8;
	}

	/* End Grid Layout */

	.app-page-title, .app-main-content {
		margin-right: 0;
	}
}

/* End 960px width Layout */