/* ------------------------------------------------------------ *\
	Winner
\* ------------------------------------------------------------ */

.winner {
	position: absolute;
	inset: 0;

	.winner__shadow {
		position: absolute;
		top: 81px;
		left: 102px;
		width: 294px;
		transform: rotate(2.75deg);
	}

	.winner__card {
		position: absolute;
		top: 70px;
		left: 117px;
		display: flex;
		flex-direction: column;
		gap: 14px;
		width: 253px;
		padding: var(--b-space-medium);
		border-radius: var(--border-radius);
		background: var(--c-white);
		color: var(--c-navy);
		transform: rotate(4.72deg);
	}

	.winner__image {
		width: 100%;
		aspect-ratio: 491 / 591;
		border-radius: 8px;
		object-fit: cover;
	}

	.winner__caption {
		display: flex;
		flex-direction: column;
		line-height: 1.5;
		text-align: center;
	}

	.winner__name {
		margin-bottom: -6px;
		font-size: 22px;
		white-space: nowrap;
		text-transform: uppercase;
	}

	.winner__role {
		font-size: 18px;
		color: var(--c-pink);
	}
}

@media (max-width: 767px) {
	.winner {
		position: relative;
		inset: auto;

		.winner__shadow {
			display: none;
		}

		.winner__card {
			position: relative;
			top: auto;
			left: auto;
			width: 220px;
			padding: 18px;
			box-shadow: 0 10px 30px rgba(95, 36, 62, .45);
		}

		.winner__name {
			font-size: 18px;
		}

		.winner__role {
			font-size: 16px;
		}
	}
}

@media (max-width: 575px) {
	.winner {
		left: 32px;

		.winner__shadow {
			display: block;
			top: 50%;
			left: 50%;
			width: 233px;
			transform: translate(-50%, -50%) translate(4px, 14px) rotate(2.75deg);
		}

		.winner__card {
			width: 200px;
			padding: 20px 16px;
			box-shadow: none;
		}

		.winner__name {
			margin-bottom: -3px;
			line-height: 1.2;
			text-transform: none;
		}

		.winner__role {
			font-family: var(--ff-medium);
			font-size: 14px;
		}
	}
}