.c-logo {
	margin-inline-start: 2.5vw;
}

.c-offer-to-donate {
	inline-size: var(--size);
	margin-inline: auto;

	a[role=button] {
		display: inline-block;
		min-block-size: unset;
		line-height: 100%;
	}

	p {
		color: var(--text-color);

		&[role=heading] {
			font-size: var(--text-xl);
		}

		&:not([role=heading]) {
			text-align: left;
		}
	}

	.u-grouping {
		flex-direction: column;
		row-gap: 1.4rem;
		margin-block-start: 3.2rem;
	}
}

.o-page-header {
	block-size: 81.2rem;
	background-size: auto, auto 28rem, 90vw;
	background-position: center, right -10rem bottom, center bottom 6rem;
	row-gap: 4rem;
}

.o-page-body {
	margin-inline: 2.5vw;
	outline: 1px dashed orange;
}

.o-good-advice {
	align-items: flex-start;
	flex-direction: column;
	min-inline-size: var(--size);
	inline-size: 80vw;
	row-gap: 2.4rem;

	.u-responsible-wrapper {
		display: contents;
	}
	p {
		min-inline-size: var(--size);
	}
	strong {
		display: block;
	}
	p:first-child {
		inline-size: var(--size);
		order: 1;
	}
	p:last-child {
		order: 3;
	}
	
	img {
		width: 100%;
		height: auto;
		min-width: var(--size);
		max-width: 56rem;
		order: 2;
	}
}

.o-kickoff-announcement {
	align-items: flex-end;
	flex-direction: column;

	[role=heading] {
		min-inline-size: var(--size);
		inline-size: 80vw;
		font-family: var(--accent-font);
		text-align: right;
	}

	[role=table] {
		display: block;
		background-color: unset;

		[role=cell] {
			background-color: inherit;
			padding-block: unset;
			line-height: 110%;

			&:nth-child(odd) {
				color: var(--text-color-70);
				padding-inline-end: unset;
				margin-block-start: 1.6rem;
			}
			&:nth-child(even) {
				margin-block-start: 1.2rem;
				padding-inline-start: unset;
				padding-block-end: 1.6rem;
				border-bottom: 2px solid var(--gray-82);
			}
		}
	}

	img {
		width: 100%;
		height: auto;
		min-width: var(--size);
		max-width: 56rem;
	}
}

.o-stages-list {
	display: flex;
	flex-direction: column;

	header {
		order: 1;
	}
	
	img[itemprop=layoutImage] {
		order: 2;
		position: static;
		transform-origin: center;
		transform: rotate(-15.31deg);
	}

	ol {
		order: 3;
		display: flex;
		flex-direction: row;
		inline-size: inherit;
		overflow: scroll;
	}
}

@media (max-width: 520px) {
	.o-kickoff-announcement {
		align-items: flex-start;

		[role=heading] {
			min-inline-size: var(--size);
			text-align: left;
		}
	}
}

:root {
	--size: 33.6rem;
}

@property --text-lg {
	syntax: "*";
	initial-value: 2.8rem;
	inherits: false;
}

@property --text-xl {
	syntax: "*";
	initial-value: 3.6rem;
	inherits: false;
}