/* Thumb fan (cards + marketing panel): children fanned from the center of a positioned parent, layout by data-count. */

/* O pai (media) pinta fundo e radius; este layer é a "mãe do leque" e o inset-inline faz o respiro lateral, já que os filhos em % se medem contra ele. */
.thumb-fan {
	--thumb-fan-pad: 6%;
	position: absolute;
	inset: 0;
	inset-inline: var(--thumb-fan-pad);
	pointer-events: none;

	& > * {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 1;
		width: 58%;
		aspect-ratio: 16 / 9;
		transform: translate(-50%, -50%);
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
	}
}

.thumb-fan[data-count="1"] > * {
	width: 72%;
}

.thumb-fan[data-count="2"] {
	& > :nth-child(1) { z-index: 1; transform: translate(-78%, -48%) rotate(-10deg); }
	& > :nth-child(2) { z-index: 2; transform: translate(-22%, -52%) rotate(10deg); }
}

.thumb-fan[data-count="3"] {
	& > * { width: 48%; }
	& > :nth-child(1) { z-index: 1; transform: translate(-95%, -42%) rotate(-14deg); }
	& > :nth-child(2) { z-index: 3; transform: translate(-50%, -54%); }
	& > :nth-child(3) { z-index: 2; transform: translate(-5%, -42%) rotate(14deg); }
}

.thumb-fan__item {
	overflow: hidden;
	border-radius: var(--system-border-radius-xs);
	background-color: var(--system-bg-box-nested);

	& img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}