.mbb-minis__header {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mbb-minis__subhead {
	font-size: 17px;
	line-height: 27px;
	color: var(--mbb-text-grey);
}

.mbb-minis-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 34px 26px;
	align-items: start;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.mbb-minis-grid__item,
.mbb-mini-single__card {
	--mbb-tilt: 1.2deg;
	min-width: 0;
	transform: rotate(var(--mbb-tilt));
	transition: transform 180ms ease;
}

.mbb-minis-grid__item:nth-child(8n + 2) { --mbb-tilt: -0.8deg; }
.mbb-minis-grid__item:nth-child(8n + 3) { --mbb-tilt: 0.6deg; }
.mbb-minis-grid__item:nth-child(8n + 4) { --mbb-tilt: -1.1deg; }
.mbb-minis-grid__item:nth-child(8n + 5) { --mbb-tilt: 0.9deg; }
.mbb-minis-grid__item:nth-child(8n + 6) { --mbb-tilt: -0.5deg; }
.mbb-minis-grid__item:nth-child(8n + 7) { --mbb-tilt: 1deg; }
.mbb-minis-grid__item:nth-child(8n + 8) { --mbb-tilt: -1.2deg; }

@media (hover: hover) {
	.mbb-minis-grid__item:hover {
		z-index: 1;
		transform: rotate(0deg) scale(1.03);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mbb-minis-grid__item {
		transition: none;
	}
}

@media (max-width: 1249px) {
	.mbb-minis-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 1023px) {
	.mbb-minis-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 28px 18px;
	}
}

@media (max-width: 639px) {
	.mbb-minis-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 14px;
	}
}

/*
 * In-game toy card. Proportions measured from the game's Minis screen,
 * as a share of card width (cqw): panel inset 3.3, panel top 22, band 14.3.
 */
.mbb-mini-card {
	--mbb-band: linear-gradient(var(--mbb-soft-grey) 0 0);
	--mbb-gradient: none;
	position: relative;
	container-type: inline-size;
	aspect-ratio: 210 / 270;
	background: var(--mbb-white);
	border: var(--mbb-stroke) solid var(--mbb-black);
	border-radius: 7% / 5.45%;
	box-shadow: var(--mbb-shadow-md);
}

/* The hanger peg, drawn solid in the game's notch shape */
.mbb-mini-card::before {
	content: "";
	position: absolute;
	top: calc(var(--mbb-stroke) * -1);
	left: 50%;
	width: 19.6%;
	aspect-ratio: 55 / 40;
	background: var(--mbb-black);
	-webkit-mask: url(../img/mini-card-notch.png) center / 100% 100% no-repeat;
	mask: url(../img/mini-card-notch.png) center / 100% 100% no-repeat;
	transform: translateX(-50%);
}

.mbb-mini-card--basic { --mbb-band: linear-gradient(#5eea62 0 0); --mbb-gradient: url(../img/rarity/basic.png); }
.mbb-mini-card--rare { --mbb-band: linear-gradient(#1daeff 0 0); --mbb-gradient: url(../img/rarity/rare.png); }
.mbb-mini-card--epic { --mbb-band: linear-gradient(#d838d5 0 0); --mbb-gradient: url(../img/rarity/epic.png); }
.mbb-mini-card--legendary { --mbb-band: linear-gradient(#f5ad18 0 0); --mbb-gradient: url(../img/rarity/legendary.png); }
.mbb-mini-card--mythic {
	--mbb-band: linear-gradient(90deg, #b0f299, #99eeb1 14%, #93e6d6 28%, #97caeb 42%, #dfe4fd 56%, #c586e5 70%, #ff70cb 85%, #ff9b76);
	--mbb-gradient: url(../img/rarity/mythic.png);
}

/* Band sits behind the mini, and again over it at 60% like in game */
.mbb-mini-card__panel {
	position: absolute;
	top: 22cqw;
	right: 3.3cqw;
	bottom: 3.3cqw;
	left: 3.3cqw;
	overflow: hidden;
	border-radius: 5cqw;
	background:
		var(--mbb-band) 0 0 / 100% 14.3cqw no-repeat,
		var(--mbb-gradient) 0 14.3cqw / 100% auto no-repeat,
		var(--mbb-white);
}

.mbb-mini-card__band {
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	left: 0;
	height: 14.3cqw;
	background: var(--mbb-band);
	opacity: 0.6;
}

.mbb-mini-card__img {
	position: absolute;
	bottom: 1cqw;
	left: 0;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.mbb-mini-card__name {
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	left: 0;
	overflow: hidden;
	padding: 0 3cqw;
	font-family: var(--mbb-font-body);
	font-size: 8.6cqw;
	font-weight: 900;
	line-height: 14.3cqw;
	letter-spacing: -0.01em;
	text-align: center;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--mbb-white);
}

.mbb-mini-card__name--long {
	font-size: 7.2cqw;
}

.mbb-mini-card__link {
	color: inherit;
	text-decoration: none;
}

.mbb-minis-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	max-width: 560px;
	margin-top: 28px;
	padding: 24px 26px 28px;
	background: var(--mbb-white);
	border: var(--mbb-stroke) solid var(--mbb-black);
	border-radius: var(--mbb-radius-lg);
	box-shadow: var(--mbb-shadow-md);
}

.mbb-minis-empty__title {
	font-size: 25px;
	line-height: 31.75px;
}

/* Single mini */

.mbb-mini-single {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 36px;
}

.mbb-mini-single__card {
	--mbb-tilt: -0.8deg;
	width: 100%;
	max-width: 420px;
}