.container {
	margin: 0 auto;
	max-width: min(700px,80%);
}

#shelves {
	margin: 1rem auto;
	width: fit-content;
  border-spacing: 0;
	
	--size: min(170px,19vw);
	
	.item {
		width: var(--size);
		height: calc(var(--size)*1.192);
		vertical-align: bottom;
		
		/* middle */
		background-image: url('../images/merch/shelf_middle.png');
		text-align: center;
		img { max-width: 100%; }
		/* left side */
		&:first-of-type {
			width: calc(var(--size)*1.158);
			background-image: url('../images/merch/shelf_left.png');
			text-align: right;
			img { max-width: 80%; }
		}
		/* right side */
		&:last-of-type {
			background-image: url('../images/merch/shelf_right.png');
			text-align: left;
			img { max-width: 85%; }
		}
		
		img {
			max-height: 90%;
			display: inline-block;
			margin-bottom: calc(var(--size)*.05);
			filter: drop-shadow(3px 4px 2px rgba(0,0,0,.2));
		}
		
		&.small img {
			max-height: 70%;
			max-width: 70%;
		}
		
		img { &:hover, &:focus-visible {
			filter:
				drop-shadow(3px 4px 2px rgba(0,0,0,.2))
				drop-shadow(0 0 3px var(--white))
				drop-shadow(0 0 2px var(--white))
				drop-shadow(0 0 2px var(--white));
			outline: 0px;
		} }
	}
	
	td {
		background-size: 100% 100%;
		&:first-of-type { width: calc(var(--size)*.9); }
		&:last-of-type {  }
	}
	
	/* top of shelves */
	tr:first-of-type {
		height: 0;
		z-index: 2;
		
		td {
			position: relative;
			height: 0;
			
			&:before {
				content: '';
				background-image: url('../images/merch/shelf_top_middle.png');
				background-repeat: no-repeat;
				background-position: top;
				background-size: 100%;
				position: absolute;
				right: 0;
				height: calc(var(--size));
				width: 100%;
			}
			
			&:first-of-type {
				&:before {
					background-image: url('../images/merch/shelf_top_left.png');
					width: 110.3%;
				}
			}
			&:last-of-type { background-image: url('../images/merch/shelf_top_right.png'); }
		}
	}
	
	/* top row of merch */
	tr:nth-of-type(2) {
		td img {
			max-height: 70%;
		}
	}
}