* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	--max-width: 1200;
	--max-width-px: 1200px;
}

body.page-id-error {
	.error-container {
		display: block;
		background: #fff;
		color: #000;
		padding: 20px;

		h1 {
			margin: 2em 0 1em 0;
		}
	}
}

.page-content {
	.content-block {
		width: 100%;
		max-width: var(--max-width-px);
		height: auto;
		margin: 0 auto;
	}
	.content-background-block {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;

		&.content-background-video {
			object-fit: cover;
		}
	}

	.row-grid {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		row-gap: 20px;
		column-gap: min(30px, calc(30 / var(--max-width) * 100vw));

		&.row-grid-full {
			min-height: 100vh;
		}

		&.row-height-default-top { align-items: start; }
		&.row-height-default-middle { align-items: center; }
		&.row-height-default-bottom { align-items: end; }
		&.row-height-full-top { align-items: start; }
		&.row-height-full-middle { align-items: center; }
		&.row-height-full-bottom { align-items: end; }

		> .content-block {
			display: grid;
			grid-column: span 12;
			grid-template-columns: repeat(12, 1fr);
		}
	}

	.row-grid, .row-grid-column, .column-element {
		position: relative;

		img {
			max-width: 100%;
			height: auto;
		}
	}

	.row-grid-column {
		grid-row: 1;
		min-width: 0;
	}

	.row-grid-column[data-position="1"]  { order: 1; }
	.row-grid-column[data-position="2"]  { order: 2; }
	.row-grid-column[data-position="3"]  { order: 3; }
	.row-grid-column[data-position="4"]  { order: 4; }
	.row-grid-column[data-position="5"]  { order: 5; }
	.row-grid-column[data-position="6"]  { order: 6; }
	.row-grid-column[data-position="7"]  { order: 7; }
	.row-grid-column[data-position="8"]  { order: 8; }
	.row-grid-column[data-position="9"]  { order: 9; }
	.row-grid-column[data-position="10"] { order: 10; }
	.row-grid-column[data-position="11"] { order: 11; }
	.row-grid-column[data-position="12"] { order: 12; }

	@media (max-width: 1024px) {
		.row-grid-column {
			grid-row: auto;
		}

		.row-grid-column[data-width="1"],
		.row-grid-column[data-width="2"],
		.row-grid-column[data-width="3"] {
			grid-column: 1 / -1 !important;
		}

		.row-grid-column[data-width="4"]  { grid-column: span 4  !important; }
		.row-grid-column[data-width="5"]  { grid-column: span 5  !important; }
		.row-grid-column[data-width="6"]  { grid-column: span 6  !important; }
		.row-grid-column[data-width="7"]  { grid-column: span 7  !important; }
		.row-grid-column[data-width="8"]  { grid-column: span 8  !important; }
		.row-grid-column[data-width="9"]  { grid-column: span 9  !important; }
		.row-grid-column[data-width="10"] { grid-column: span 10 !important; }
		.row-grid-column[data-width="11"] { grid-column: span 11 !important; }
		.row-grid-column[data-width="12"] { grid-column: span 12 !important; }
	}

	@media (max-width: 768px) {
		.row-grid {
			grid-template-columns: 1fr;

			.row-grid-column[data-width] {
				grid-column: 1 / -1 !important;
				grid-row: auto !important;
			}
		}
	}

	/* parts */
	.part-img {
		font-size: 0;
	}

	.part-imgbutton {
		position: relative;

		.color-overlay {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: 1fr;
			place-items: center;
			text-align: center;
			padding: 10px;
			transition: opacity 0.3s ease;

			&:hover {
				opacity: 1;
			}
		}
	}

	.part-tinymce {
		p:last-child {
			margin-bottom: 0;
		}
	}
}

@media (min-width: 1025px) {
	.hide-desktop {
		display: none !important;
	}
}
@media (max-width: 1024px) {
	.hide-tablet {
		display: none !important;
	}
}
@media (max-width: 768px) {
	.hide-mobile {
		display: none !important;
	}
}