.expl_i,
body {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.expl_gr {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	flex-wrap: wrap;
	justify-content: center;
}
.expl_gr > * {
	margin: 1em;
}
.expl_bg {
	--bi: linear-gradient(
		45deg,
		black 25%,
		transparent 25%,
		transparent 75%,
		black 75%,
		black
	);
	--bs: 384px;

	width: var(--bs);
	height: var(--bs);
	border: solid;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #eee;
	background-image: var(--bi), var(--bi);
	background-size: 256px 256px;
	background-position: 0 0, 128px 128px;
	transition: all 64ms ease-in-out;
	transform: none;
	transform-style: preserve-3d;
	overflow: hidden;
}
.expl_bg:hover {
	transform: perspective(50mm) rotateY(10deg);
	overflow: visible;
}
.expl_i > * {
	margin-bottom: 3px;
}
.ip {
	border: solid 1px;
	border-radius: 5px;
	padding: 1px 5px;
	width: 100%;
	user-select: all;
}
img {
	--s: 1;
	--cs: calc(var(--s) * 128px);
	width: var(--cs);
	height: var(--cs);
	image-rendering: crisp-edges;
	transform: translate(calc(var(--x) * 128px), calc(var(--y) * 128px));
}