#wz-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-evenly;
}
#wz-container h2 {
	margin: 0;
}
#wz-info {
	text-align: center;
	font-weight: bold;
	min-height: 3em;
}
#wz-map-map {
	border-radius: 8px;
	padding: 0;
	margin: 0;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}
.wz-icon {
	padding: 0;
	margin: 0;
	height: 1em;
	width: 1em;
	vertical-align: middle;
}
.wz-icon-smaller {
	height: .75em;
	width: .75em;
}
#wz-events {
	align-self: center;
	overflow-y: scroll;
}
#wz-realms-info {
	align-self: center;
}
.wz-realm-header {
	display: grid;
	grid-template-areas:
		"realm forts"
		"gems forts"
		"relics forts";
	gap: 0 2em;
	min-height: 3em;
	align-items: center;
	font-size: 150%;
	font-weight: bold;
}
.wz-realmname {
	grid-area: realm;
	text-align: right;
}
.wz-gems {
	grid-area: gems;
	text-align: right;
	min-width: max-content;
	display: flex;
	justify-content: flex-end;
}
.wz-relics {
	grid-area: relics;
	text-align: right;
	display: flex;
	justify-content: flex-end;
}
.wz-forts {
	grid-area: forts;
	font-size: initial;
	font-weight: initial;
}
span[id^="wz-forts-"] {
	display: block;
}

@media (min-width: 1549px) {
	#wz-container {
		gap: 3em 1em;
	}
	#wz-map {
		padding: 0px;
		/* XXX hide some margin issue leaving 4 px left at the bottom */
		background-color: unset;
	}
	#wz-map-map {
		height: 500px;
		width: 500px;
	}
	#wz-events {
		height: 500px;
		width: 30em;
	}
	#wz-realms-info {
		min-width: 26em;
		min-height: 20em;
	}
	#wz-alsius, #wz-ignis {
		margin-bottom: 3em;
	}
	#wz-alsius, #wz-ignis, #wz-syrtis {
		min-height: 5.5em;
		min-width: 28em;
	}
	.wz-forts {
		min-width: 12em;
	}
}

@media (min-width: 512px) and  (max-width: 1549px) {
	#wz-map {
		padding: 0px;
		/* XXX hide some margin issue leaving 4 px left at the bottom */
		background-color: unset;
	}
	#wz-map-map {
		width: 400px;
		height: 400px;
	}
	#wz-events {
		min-width: 400px;
		height: 400px;
		flex-grow: 1;
		flex-basis: min-content;
	}
	#wz-container {
		gap: 0;
		justify-content: space-around;
	}
	.wz-forts, .wz-realm-header {
		gap: .5em;
	}
}

@media (min-width: 512px) and (max-width: 1250px) {
	#wz-realms-info {
		flex-grow: 1;
	}

}

@media(max-width: 512px) {
	#wz-map {
		text-align: center;
		width: calc(100% - 2 * var(--default_margin_padding));
		box-sizing: border-box;
		margin-bottom: 1em;
	}
	#wz-map-map {
		height: 40vh;
		width: 40vh;
	}
	#wz-events {
		height: 50vh;
		margin-top: 1em;
	}
	#wz-realms-info {
		width: 100%;
	}
	#wz-alsius, #wz-ignis, #wz-syrtis {
		min-height: 7.5em;
	}
	#wz-alsius, #wz-ignis {
		margin-bottom: 1em;
	}
	.wz-forts, .wz-realm-header {
		gap: .5em;
	}
}