Template:Game/styles.css

.game-infobox-container {
	display: grid;
	grid: 
		"boxart ad" auto 
		"boxart ibox" auto
		/ 1fr 1fr;
	gap: 10px;
	width: 100%;
}

.game-infobox-container > .desktop-300-right {
	grid-area: ad;
	place-self: start end;
	margin: 0;
	height: 250px;
	width: 300px;
}

.game-infobox-container > .floatleft,
.game-infobox-container > .mw-halign-left {
	grid-area: boxart;
	justify-self: center;
	margin: 0;
	padding: 0;
	width: 100%;
	max-width: 300px;
}
.game-infobox-container > .floatleft img,
.game-infobox-container > .mw-halign-left img {
	height: auto;
	width: 100%;
	max-width: 300px !important;
}

.game-infobox-container > .infobox {
	grid-area: ibox;
	align-self: start;
	justify-self: end;
	margin: 0;
	min-width: 300px;
}

.img-ib-inline  {
	padding-right: 0.3em;
}

.img-greyscale {
	filter: grayscale(100%);
}

@media all and (max-width: 719px) {
	body.skin-timeless .game-infobox-container {
		grid: 
			"ad" auto
			"boxart" auto
			"ibox" auto
			/ auto;
	}

	body.skin-timeless .game-infobox-container > .desktop-300-right {
		justify-self: center;
	}

	body.skin-timeless .game-infobox-container > .floatleft,
	body.skin-timeless .game-infobox-container > .mw-halign-left {
		width: 300px;
	}
}

@media all and (min-width: 720px) {
	.infobox.mw-collapsible,
	.infobox.noprint {
		margin-top: -0.5em;
	}
}

@media all and (min-width: 1176px) {
	.game-infobox-container {
		grid: 
			"boxart ibox ad" auto 
			/ 250px minmax(300px, auto) 300px;
	}

	.game-infobox-container > .infobox {
		width: auto;
		justify-self: stretch;
	}	

	.game-infobox-container > .floatleft,
	.game-infobox-container > .mw-halign-left {
		width: auto;
	}

	.game-infobox-container > .floatleft img,
	.game-infobox-container > .mw-halign-left img {
		width: auto;
		max-height: 250px !important;
	}
}