.p-cross-talk__lead {
	margin-block-start: calc(80 * var(--rem));
}

.p-cross-talk__cards {
	margin-block-start: calc(80 * var(--rem));
}

:where(.p-page-lead) {
	margin-inline: auto;
	inline-size: max-content;
	& p {
		--clamp-min: 14;
		--clamp-max: 16;
		line-height: 2.6;
		text-align: center;
	}
}

.p-horizontal-cards {
	display: block grid;
	gap: calc(32 * var(--rem)) calc(20 * var(--rem));
	container: horizontal-card-container / inline-size;
	@media (width >=768px) {
		gap: calc(16 * var(--rem));
	}
}

.p-horizontal-card {
	border: 1px solid currentColor;
	cursor: pointer;
	display: block grid;
	padding: clamp(calc(20 * var(--rem)), 4.3cqi, calc(48 * var(--rem)));
	column-gap: clamp(calc(24 * var(--rem)), 4.3cqi, calc(48 * var(--rem)));
	row-gap: calc(24 * var(--rem));
	@media (width >= 768px) {
		grid-template-columns: 1fr minmax(250px, calc(392 / 1084 * 100%));
	}
}

.p-horizontal-card.p-horizontal-card--reverse {
	@media (width >= 768px) {
		grid-template-columns: minmax(250px, calc(392 / 1084 * 100%)) 1fr;
		.p-horizontal-card__img-wrapper {
			order: 2;
		}
	}
}

.p-horizontal-card__img-wrapper {
	aspect-ratio: 302/184;
	inline-size: 100%;
	overflow: hidden;
	position: relative;
	flex: 1 0 100%;
	@media (width >= 768px) {
		aspect-ratio: revert;
		min-block-size: 377px;
	}
}

.p-horizontal-card__img {
	block-size: 100%;
	inline-size: 100%;
	object-fit: cover;
}

.p-horizontal-card__body {
	container: horizontal-card-body / inline-size;
	display: block grid;
	grid-template-rows:
		min-content calc(16 * var(--rem)) min-content calc(24 * var(--rem))
		min-content calc(40 * var(--rem)) 1fr;
	grid-template-areas:
		"label"
		"."
		"title"
		"."
		"text"
		"."
		"button";
	@media (width >= 768px) {
		padding-block-start: calc(24 * var(--rem));
		grid-template-rows:
			min-content calc(32 * var(--rem)) min-content calc(24 * var(--rem))
			min-content calc(24 * var(--rem)) 1fr;
	}
}

.p-horizontal-card__label {
	border: 1px solid currentColor;
	grid-area: label;
	font-family: var(--font-zen);
	font-weight: 500;
	display: flex;
	inline-size: fit-content;
	.num,
	.text {
		font-size: clamp(calc(14 * var(--rem)), 5.2cqi, calc(18 * var(--rem)));
		display: inline-block;
		line-height: 1;
		padding: calc(4 * var(--rem)) calc(8 * var(--rem));
	}
	.num {
		background-color: var(--color-white);
	}
	.text {
		background-color: var(--color-black01);
		color: var(--color-white);
	}
}

.p-horizontal-card__title {
	--clamp-min: 24;
	--clamp-max: 32;
	grid-area: title;
	line-height: 1.4;
	font-family: var(--font-zen);
	font-weight: 600;
}

.p-horizontal-card__text {
	--clamp-min: 12;
	--clamp-max: 14;
	grid-area: text;
	letter-spacing: 0.04em;
}

.c-button-plus {
	grid-area: button;
	align-self: end;
	justify-self: end;
	align-items: center;
	column-gap: calc(12 * var(--rem));
	display: inline grid;
	font-weight: 600;
	grid-template-columns: max-content 32px;
	line-height: 1.8;
	text-wrap: pretty;
	transition-duration: 0.4s;
	transition-property: border-radius;
	vertical-align: middle;
	@media (width >= 768px) {
		justify-self: start;
	}
	&:focus-visible {
		border-radius: 0;
	}
	.text {
		font-size: calc(14 * var(--rem));
		font-weight: 600;
	}
	.plus {
		background-color: var(--color-black01);
		aspect-ratio: 1;
		border-radius: 50%;
		inline-size: calc(32 * var(--rem));
		position: relative;
	}
	.plus::before,
	.plus::after {
		background-color: var(--color-white);
		content: "";
		left: 50%;
		position: absolute;
		top: 50%;
		translate: -50% -50%;
	}
	.plus::before {
		inline-size: 1px;
		block-size: 12px;
	}
	.plus::after {
		inline-size: 12px;
		block-size: 1px;
	}
}