.c-text-section {
	background: var(--ts-bg);
}

.c-text-section__inner {
	max-width: calc(var(--width-narrow) + var(--gutter) * 2);
	padding-block: var(--block-spacing-top, var(--spacing-xl)) var(--block-spacing-bottom, var(--spacing-xl));
}

.c-text-section__inner--media {
	display: grid;
	align-items: center;
	grid-template-columns: minmax(0, 1fr) minmax(0, 407px);
	gap: var(--spacing-lg);
}

.c-text-section__inner--media-left {
	grid-template-columns: minmax(0, 407px) minmax(0, 1fr);
}

.c-text-section__inner--media-left .c-text-section__text {
	order: 2;
}

.c-text-section__text {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: var(--spacing-md);
}

.c-text-section__heading {
	margin: 0;
}

.c-text-section__copy {
	align-self: stretch;
}

.c-text-section__copy > :first-child {
	margin-top: 0;
}

.c-text-section__copy > :last-child {
	margin-bottom: 0;
}

.c-text-section__copy :is(h2, h3, h4) {
	margin: var(--spacing-lg) 0 var(--spacing-md);
}

.c-text-section__copy h2 {
	font-size: var(--text-h3);
	line-height: var(--lh-h3);
	letter-spacing: var(--ls-h3);
}

.c-text-section__copy h3 {
	font-size: var(--text-h5);
	line-height: var(--lh-h5);
	font-weight: var(--weight-demi);
}

.c-text-section__copy h4 {
	font-size: var(--text-h6);
	line-height: var(--lh-h6);
	font-weight: var(--weight-demi);
}

.c-text-section__copy :is(ul, ol) {
	padding-left: 1.25em;
	margin: 0 0 1rem;
}

.c-text-section__heading + .c-text-section__copy > ul:first-child {
	margin-top: var(--spacing-sm);
}

.c-text-section__copy li {
	margin-bottom: var(--spacing-sm);
	break-inside: avoid;
}

.c-text-section__copy--flags ul {
	padding: 0;
	list-style: none;
}

.c-text-section__copy--flags ul > li {
	position: relative;
	padding-left: 36px;
}

.c-text-section__copy--flags ul > li::before {
	content: "";
	position: absolute;
	top: calc((1lh - 24px) / 2);
	left: 0;
	width: 24px;
	height: 24px;
	background: var(--color-green-mid);
	mask: url("../../assets/svg/icons/icon-flag.svg") center / contain no-repeat;
}

@media (width >= 768px) {
	.c-text-section__copy--list-cols-2 ul {
		columns: 2;
		column-gap: var(--spacing-col);
	}
}

.c-text-section__media {
	aspect-ratio: 407 / 300;
	margin: 0;
	border-radius: var(--radius-rounded);
	overflow: hidden;
	position: relative;
	isolation: isolate;
}

.c-text-section__image,
.c-text-section__image img {
	display: block;
	width: 100%;
	height: 100%;

	object-fit: cover;
}

@media (width < 768px) {
	.c-text-section__inner--media {
		grid-template-columns: minmax(0, 1fr);
	}

	.c-text-section__inner--media-left .c-text-section__text {
		order: 0;
	}
}