.section-podium {
	width: 100%;
	max-width: var(--container--width);
	margin-right: auto;
	margin-left: auto;
	container: podium / inline-size;
}

.podium-intro {
	max-width: 54ch;
	margin-top: calc(var(--layout--padding) * -1 + var(--spacing-2));
	margin-bottom: var(--layout--padding);
	color: var(--color-secondary);
	font-size: var(--font-small);
	line-height: 1.5;
}

.podium-list {
	display: grid;
	align-items: end;
	gap: var(--layout--padding);
	margin-right: calc(var(--layout--offset) * -1);
	margin-left: calc(var(--layout--offset) * -1);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.podium-card {
	position: relative;
	display: flex;
	min-width: 0;
	flex-direction: column;
}

.podium-card-first {
	--medal-light: #fff0a6;
	--medal-main: #e8b83f;
	--medal-dark: #9b6715;
	--medal-logo: #76500f;
	--phone-scale: 1.084;
	--podium-pastel: #fff1b8;
	--podium-ink: #57430b;
	--podium-ink-muted: #786426;

	order: 2;
}

.podium-card-second {
	--medal-light: #f5f7fa;
	--medal-main: #b7bec8;
	--medal-dark: #727b87;
	--medal-logo: #59616c;
	--phone-scale: 1.072;
	--podium-pastel: #e8ebf0;
	--podium-ink: #3f4650;
	--podium-ink-muted: #656d78;

	order: 1;
}

.podium-card-third {
	--medal-light: #f2c2a0;
	--medal-main: #bb754b;
	--medal-dark: #754029;
	--medal-logo: #63341f;
	--phone-scale: 1;
	--podium-pastel: #f4d2bf;
	--podium-ink: #603824;
	--podium-ink-muted: #83533b;

	order: 3;
}

.podium-rank {
	position: absolute;
	z-index: 2;
	top: var(--spacing-6);
	left: var(--spacing-6);
	display: block;
}

.podium-medal {
	position: relative;
	display: grid;
	width: 1.3rem;
	height: 1.52rem;
	flex: 0 0 auto;
	place-items: center;
}

.podium-medal-art {
	display: block;
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 1px 1px rgb(0 0 0 / 15%));
	overflow: visible;
	transform: none;
	transition: none;
}

.podium-medal-ribbon {
	fill: var(--medal-dark);
	stroke-linejoin: round;
}

.podium-medal-ribbon-left {
	fill: color-mix(in srgb, var(--medal-main), var(--medal-dark) 30%);
}

.podium-medal-disc {
	fill: var(--medal-main);
}

.podium-medal-ring {
	fill: var(--medal-light);
}

.podium-medal-logo-color {
	flood-color: var(--medal-logo);
}

.podium-card:hover :where(.podium-medal, .podium-medal-art) {
	transform: none;
}

.podium-image {
	position: relative;
	display: grid;
	height: 13rem;
	border-radius: var(--radius-4);
	background-color: var(--podium-pastel);
	grid-template-rows: minmax(0, 1fr) auto;
	overflow: hidden;
	clip-path: inset(0 round var(--radius-4));
	transform-origin: 50% 100%;
	transition: background-color .2s ease, transform .3s cubic-bezier(.4,0,.2,2);
}

.podium-card-first .podium-image {
	height: 16rem;
}

.podium-card-second .podium-image {
	height: 14.5rem;
}

.podium-image img {
	position: relative;
	z-index: 1;
	left: 50%;
	display: block;
	width: 100%;
	height: 8rem;
	min-height: 0;
	padding: var(--spacing-7) var(--spacing-7) var(--spacing-3);
	align-self: center;
	justify-self: center;
	margin-right: auto;
	margin-left: auto;
	object-fit: contain;
	object-position: 50% 50%;
	filter: drop-shadow(0 .75rem .75rem rgb(0 0 0 / 10%));
	transform-origin: 50% 50%;
	transform: translateX(-50%) scale(var(--phone-scale));
	transition: transform .3s cubic-bezier(.4,0,.2,1);
}

.podium-card:is(:hover, :active, :focus-within) .podium-image {
	background-color: var(--podium-pastel);
	transform: scale(1.01);
}

.podium-card:is(:hover, :active, :focus-within) .podium-image img {
	transform: translateX(-50%) scale(var(--phone-scale));
}

.podium-content {
	position: relative;
	z-index: 1;
	display: flex;
	min-width: 0;
	padding: var(--spacing-4) var(--spacing-7) var(--spacing-7);
	flex-direction: column;
	align-items: flex-start;
}

.podium-award {
	margin-bottom: var(--spacing-2);
	color: var(--podium-ink-muted);
	font-size: var(--font-x-small);
	font-weight: var(--font-medium);
	line-height: 1.35;
}

.section-podium .podium-content > h3 {
	color: var(--podium-ink);
	font-size: .8rem !important;
	font-weight: var(--font-semibold);
	line-height: 1.15;
	letter-spacing: -.02em;
}

.podium-card-link {
	position: absolute;
	z-index: 3;
	border-radius: inherit;
	color: var(--podium-ink);
	inset: 0;
}

.podium-card-link:focus-visible {
	outline: 2px solid var(--podium-ink);
	outline-offset: -3px;
}

.podium-card-arrow {
	position: absolute;
	top: var(--spacing-6);
	right: var(--spacing-6);
	display: grid;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: var(--radius-2);
	background-color: color-mix(in srgb, var(--podium-pastel), var(--podium-ink) 8%);
	place-items: center;
}

.podium-card-arrow svg {
	width: .85rem;
	height: .85rem;
	transition: transform .2s ease;
}

.podium-card-link:hover .podium-card-arrow svg {
	transform: translateX(1px);
}

@container podium (width < 600px) {
	.podium-list {
		gap: var(--spacing-4);
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.podium-image {
		height: 9rem;
	}

	.podium-card-first .podium-image {
		height: 12rem;
	}

	.podium-card-second .podium-image {
		height: 10.5rem;
	}

	.podium-rank {
		top: var(--spacing-4);
		left: var(--spacing-4);
	}

	.podium-medal {
		width: 1.08rem;
		height: 1.26rem;
	}

	.podium-content {
		padding: var(--spacing-2) var(--spacing-4) var(--spacing-4);
	}

	.podium-image img {
		height: 5rem;
		padding: var(--spacing-5) var(--spacing-4) var(--spacing-1);
	}

	.podium-award {
		font-size: .68rem;
	}

	.section-podium .podium-content > h3 {
		font-size: .68rem !important;
	}

	.podium-card-arrow {
		top: var(--spacing-4);
		right: var(--spacing-4);
		width: 1.5rem;
		height: 1.5rem;
	}

	.podium-card-arrow svg {
		width: .72rem;
		height: .72rem;
	}
}

@container podium (width < 400px) {
	.podium-list {
		gap: var(--spacing-2);
	}

	.podium-image {
		height: 8rem;
	}

	.podium-card-first .podium-image {
		height: 10.5rem;
	}

	.podium-card-second .podium-image {
		height: 9.25rem;
	}

	.podium-image img {
		height: 4.25rem;
	}

}