/* ------------------------------------------------------------ *\
	Section Expect
\* ------------------------------------------------------------ */

.section-expect {
	padding: var(--section-spacing) 0;
	/* The shape SVG carries a drop-shadow margin, so it is oversized like in the design (inset -0.25% / -0.79%) */
	background: url('../../images/expect-shape.svg') 50% calc(var(--section-spacing) - 6px) / 100.5% calc(100% - var(--section-spacing) + 14px) no-repeat;

	.title {
		font-size: calc(var(--fs-h2) - 2px);
	}

	.section__inner {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 40px;
		margin-top: 40px;
	}

	.section__list {
		display: flex;
		flex: 0 1 746px;
		flex-direction: column;
		gap: var(--gap-small);
	}

	.section__media {
		flex: 0 1 520px;
	}
}

@media (max-width: 1023px) {
	.section-expect {
		--shape-height: 560px;

		/* Green fill on top of the shape's lower edge hides its drop-shadow line */
		background:
			linear-gradient(var(--c-green), var(--c-green)) 50% 100% / 100% calc(100% - var(--section-spacing) - var(--shape-height) + 40px) no-repeat,
			url('../../images/expect-shape.svg') 50% calc(var(--section-spacing) - 6px) / 100.5% var(--shape-height) no-repeat;

		.section__inner {
			flex-direction: column;
		}

		.section__list {
			flex: 0 0 auto;
			width: 100%;
			max-width: 746px;
		}

		.section__media {
			flex: 0 0 auto;
			width: 100%;
			max-width: 420px;
		}
	}
}

@media (max-width: 575px) {
	.section-expect {
		padding-bottom: 40px;
		/* Shape at its own height, anchored to the bottom like the mobile design */
		background: url('../../images/expect-shape.svg') -64px calc(100% + 8px) / 1211px 1015px no-repeat;

		.section__media {
			max-width: none;
		}
	}
}