/*
 * Boxed feature (Figma: Home "Frame 358"; Studio "Beyond the Charkha"; Our Approach "Growing into
 * Depth"; About Our Yarns "Responsible Production"; SAORI "How SAORI began" with the wider image).
 * The photo fills the whole section, so "Space above/below" is padding inside it.
 */

/* layout.css drops the top padding between two sections of the same background colour; the photo
   is this section's real background, so it and its neighbour keep their padding. */
.pb-l + .s.s-boxed_feature.pt-l,
.s-boxed_feature.pb-l + .s.pt-l {
	padding-top: var(--space-l);
}

.boxed__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--c-dark);
}

.boxed__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.boxed__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 0.5);
}

.boxed__wrap {
	position: relative;
}

.boxed {
	display: grid;
	padding: 72px 96px;
	background: var(--c-bg);
	color: var(--c-text);
}

/* The image in the box is as tall as the text beside it. */
.boxed--image {
	grid-template-columns: minmax(0, 1fr) 272px;
	column-gap: 112px;
}

/* Wider image: 368 wide, close beside the text, and at least 300 tall. */
.boxed--image-m {
	grid-template-columns: minmax(0, 1fr) 368px;
	column-gap: 16px;
}

.boxed--image-m .boxed__image {
	min-height: 300px;
}

.boxed__content {
	display: grid;
	align-content: start;
	gap: 16px;
	max-width: 560px;
}

.boxed__text {
	color: var(--c-text-2);
}

.boxed__text > * + * {
	margin-top: var(--lh-body);
}

.boxed__buttons {
	margin-top: 16px;
}

.boxed__image {
	position: relative;
}

.boxed__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 1023px) {
	.boxed {
		padding: 48px;
	}

	.boxed--image {
		grid-template-columns: minmax(0, 1fr) 240px;
		column-gap: 48px;
	}

	.boxed--image-m {
		grid-template-columns: minmax(0, 1fr) 300px;
		column-gap: 16px;
	}
}

@media (max-width: 767px) {
	.boxed,
	.boxed--image {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 16px;
	}

	.boxed__image {
		aspect-ratio: 1;
	}
}