div#costume{
	display: grid;
	grid-template-columns: [begin] 33% [photo-b] 7% [info] 10% [mid] 16% [photo-c] 33% [end] 1%;

	max-width: 85rem;
	margin-left: auto;
	margin-right: auto;

	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}
div#costume div{
	padding: 0.5rem;
}
div#costume img{
	width: 100%;
	place-self: center;
	border-radius: 0.3rem;
}

div#costume div#primary-photo{
	grid-column: begin / info;
	grid-row: 1;
}
div#costume div#primary-photo img{
	cursor: pointer;
}

div#costume div#info{
	grid-column: info / end;
	grid-row: 1;
}
div#costume[data-primary-photo="false"] div#info{
	grid-column: begin / end;
}

div#costume[data-primary-photo="true"] div#info p{
	text-align: left;
}
div#costume[data-primary-photo="false"] div#info p{
	text-align: center;
}

div#costume div#info table#quickfacts{
}
div#costume[data-primary-photo="false"] div#info table#quickfacts{
	margin-left: auto;
	margin-right: auto;
}

div#costume div#info table#quickfacts th{
	text-align: right;
	vertical-align: bottom;

	font-weight: bold;
	font-size: 1.2rem;
	border: none;

	padding-top: 0.6rem;
	padding-right: 0.7rem;
	padding-bottom: 0;
}
div#costume div#info table#quickfacts td{
	text-align: left;
	vertical-align: bottom;

	font-weight: normal;
	border: none;

	padding: 0;
}

div#costume div#photo-a{
	grid-column: begin / photo-b;
	grid-row: 2;
}
div#costume div#photo-a img{
	cursor: pointer;
}

div#costume div#photo-b{
	grid-column: photo-b / photo-c;
	grid-row: 2;
}
div#costume div#photo-b img{
	cursor: pointer;
}

div#costume div#photo-c{
	grid-column: photo-c / end;
	grid-row: 2;
}
div#costume div#photo-c img{
	cursor: pointer;
}

@media screen and (min-width: 32rem){
	div#costume{
		grid-template-columns: [begin] 10rem [photo-b] 2rem [info] 3rem [mid] 5rem [photo-c] 10rem [end];
		width: 30rem;
		max-width: 30rem;
	}
}
@media screen and (max-width: 62rem){
	div#costume div#primary-photo{
		grid-column: begin / end;
		grid-row: 1;
	}
	div#costume div#info{
		grid-column: begin / end;
		grid-row: 2;
	}

	div#costume div#photo-a{
		grid-column: begin / end;
		grid-row: 3;
	}
	div#costume div#photo-b{
		grid-column: begin / end;
		grid-row: 4;
	}
	div#costume div#photo-c{
		grid-column: begin / end;
		grid-row: 5;
	}
}
@media screen and (min-width: 62rem){
	div#costume{
		grid-template-columns: [begin] 20rem [photo-b] 4rem [info] 6rem [mid] 10rem [photo-c] 20rem [end];
		width: 60rem;
		max-width: 60rem;
	}
}
@media screen and (min-width: 92rem){
	div#costume{
		grid-template-columns: [begin] 30rem [photo-b] 6rem [info] 9rem [mid] 15rem [photo-c] 30rem [end];
		width: 90rem;
		max-width: 90rem;
	}
}