html {
	height: 100%;
}
body {
	margin: 0;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	font-family: SoDoSans, Helvetica Neue, Helvetica,Arial, sans-serif;
}
.header {
	display: flex;
	align-content: center;
	justify-content: center;
	flex-wrap: wrap;
	flex-grow: 0;
	flex-shrink: 0;
	block-size: 100px;
	border-block-end: solid 1px rgba(0, 0, 0, 0.12);
}
.header-wrapper {
	inline-size: 100%;
	max-inline-size: 1280px;
	padding-inline: 20px;
}
.logo {
	inline-size: 60px;
	block-size: 60px;
}
.main-content {
	flex-grow: 1;
	padding: 48px 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.container {
	max-width: 800px;
	margin: 0 auto;
}

.error-title {
	font-size: 19px;
	line-height: 1.4;
	color: rgba(0,0,0,.58);
	text-align: center;
}

.title {
	font-size: 26px;
	color: #000;
	margin-block: 0 24px;
}
.main-copy {
	font-size: 16px;
	line-height: 1.4;
	color: rgba(0,0,0,.58);
}

.main-copy h2 {
	font-size: 22px;
	color: #000;
}

.main-copy h3 {
	font-size: 18px;
	color: #000;
}

.image-wrapper {
	block-size: 230px;
	overflow: hidden;
	position: relative;
}
.image-wrapper img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center top;
	flex-grow: 0;
	flex-shrink: 0;
}
.image-wrapper .desktop-image {
	display: none;
}

.error-trace {
	display: none;
}

@media (min-width: 768px) {
	.main-content {
		padding: 48px;
	}
	.image-wrapper {
		block-size: 270px;
	}
	.image-wrapper .desktop-image {
		display: block;
	}
	.image-wrapper .mobile-image {
		display: none;
	}
}