body {
	margin: 0 auto;
	font-family: monospace;
	display: grid;
	grid-template-columns: 1fr;
	place-items: center;
}

ul {
	text-align: left;
}

ol {
	text-align: left;
}

main {
	text-align: center;
	place-items: center;
	font-size: 15px;
	display: grid;
	grid-template-columns: 1fr;
	width: 60vw;
}

.save273_logo {
	width: 20vw;
}

#save273_sign {
	width: 20vw;
}

.save273_map {
        width: 60vw;
        height: 100%;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position-x: left;
	background-position-y: center;
	background-image: url("../images/intersection_big.jpg");
	background-image: image-set(
		url("../images/intersection_400.webp") 3x type("image/webp"),
		url("../images/intersection_800.webp") 2x type("image/webp"),
		url("../images/intersection_big.webp") 1x type("image/webp"),
		url("../images/intersection_400.jpg") 3x type("image/jpeg"),
		url("../images/intersection_800.jpg") 2x type("image/jpeg"),
		url("../images/intersection_big.jpg") 1x type("image/jpeg")
	);
}

@media (max-aspect-ratio: 4/3) {
	main {
		width: auto;
	}
	.save273_logo {
		width: 25vw;
	}
	.save273_sign {
		width: 25vw;
	}
	.save273_map {
		width: 100vw;
	}
}

@media (max-aspect-ratio: 9/16) {
	main {
		width: auto;
	}
	.save273_logo {
		width: 25vw;
	}
	.save273_sign {
		width: 25vw;
	}
	.save273_map {
		width: 100vw;
		height:50vh;
	}
}