/* gift-wheel — Figma 258:255: 1920×666 band, photo bg (wheel on the left), 684px copy column on the right. */

.gift-wheel {
	position: relative;
	isolation: isolate;
	padding-block: calc(var(--space-section) + var(--space-6)) var(--space-26); /* Figma pt 182 / pb 107 */
}

.gift-wheel__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.gift-wheel__bg img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center 40%; /* Figma shows the middle band of the photo */
}

/* Copy on the visual RIGHT = inline-start in RTL. */
.gift-wheel__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-8);
	inline-size: 100%;
	max-inline-size: 42.75rem; /* 684px column */
	text-align: center;
}

.gift-wheel__content .section-head {
	inline-size: 100%;
}

.gift-wheel__cta {
	inline-size: auto;
	margin-block-start: calc(var(--space-21) - var(--space-8)); /* Figma: 84px above the button */
	padding-inline: var(--space-6);
}

@media (max-width: 1023px) { /* bp: --bp-lg — no room beside the wheel: centre the copy */
	.gift-wheel__content {
		margin-inline: auto;
	}
}

@media (max-width: 767px) { /* bp: --bp-md — portrait photo: copy on its empty top, wheel revealed below */
	.gift-wheel {
		padding-block: var(--space-16) 92vw; /* reveal scales with the photo's width */
	}

	.gift-wheel__bg img {
		object-position: center bottom;
	}
}