.main-container {
	width: min(100%, 900px);
}

.cardset {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}


.fiv-button svg {
	fill: white;
	stroke: white;
}

.card {
	--width: min(80vw,max(160px,min(30vw,240px)));
	width: var(--width);
	filter: drop-shadow(1px 2px 2px rgba(0,0,0,.5));
	transition: opacity .3s, scale .3s, rotate .3s;
	
	img {
		max-width: 100%;
	aspect-ratio: 367/512;
		border-radius: calc(.05 * var(--width));
	}
}
.card { rotate: .75deg; }
.card:nth-child(2n) { rotate: -.5deg; }
.card:nth-child(3n) { rotate: .5deg; }
.card:nth-child(4n) { rotate: .25deg; }
.card:nth-child(5n) { rotate: -.75deg; }
.card:nth-child(6n) { rotate: -.25deg; }
.card:nth-child(7n) { rotate: .5deg; }

.card:hover {
	z-index: 2;
	scale: 1.1;
	rotate: 0deg;
}

/* note: something like the hover style on card-codex.com would be cool */

.card:not(.owned) {
	opacity: .5;
	&:hover { opacity: 1; }
}