/*
 * Image and text (Figma: Home "Frame 6" with the image under the heading; side by side on
 * Our Approach "Frame 398" and Studio "Frame 381").
 */

.media-text {
	display: grid;
	gap: 16px;
	align-items: center;
}

.media-text__content,
.media-text__head,
.media-text__body {
	display: grid;
	align-content: start;
	gap: 16px;
}

.media-text__eyebrow {
	font-size: var(--t-sub);
	line-height: var(--lh-sub);
	font-weight: 500;
	text-transform: uppercase;
	color: var(--c-text-2);
}

.media-text__heading--l {
	font-size: var(--t-title-l);
	line-height: var(--lh-title-l);
}

.media-text__subheading {
	font-family: var(--f-display);
	font-size: var(--t-title-s);
	line-height: var(--lh-title-s);
	font-weight: 500;
	font-style: italic;
}

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

.bg-dark .media-text__text,
.bg-dark .media-text__eyebrow {
	color: inherit;
}

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

.media-text__media img {
	width: 100%;
}

/* Side by side: two equal columns. */
.media-text--left,
.media-text--right {
	grid-template-columns: 1fr 1fr;
}

.media-text--left .media-text__media {
	grid-row: 1;
	grid-column: 1;
}

.media-text--left .media-text__content {
	grid-column: 2;
}

.media-text--left .media-text__buttons,
.media-text--right .media-text__buttons {
	margin-top: 16px;
}

/* Image under the heading: heading, image across the column, then the text. */
.media-text--top {
	gap: 40px;
}

.media-text--top .media-text__content {
	display: contents;
}

.media-text--top .media-text__head {
	max-width: 560px;
}

.media-text--top .media-text__media {
	order: 1;
}

.media-text--top .media-text__body {
	order: 2;
}

@media (max-width: 767px) {
	.media-text--left,
	.media-text--right {
		grid-template-columns: 1fr;
	}

	.media-text--left .media-text__media,
	.media-text--left .media-text__content {
		grid-row: auto;
		grid-column: auto;
	}

	.media-text--right .media-text__media {
		order: -1;
	}

	/* Phones crop the wide image to a near-square, as in the mobile frame. */
	.media-text--top .media-text__media img {
		aspect-ratio: 328 / 312;
		object-fit: cover;
	}
}

/* Image widths other than half (Studio "Around the loom" 560, Spinning Wheels "A tool for design"
   464, the Spinning Wheels intro 272): a 112 px gap, the rest goes to the text, fixed image shapes. */
@media (min-width: 768px) {
	.media-text--img-large,
	.media-text--img-medium,
	.media-text--img-small {
		column-gap: clamp(32px, 8.75vw, 112px);
	}

	.media-text--left.media-text--img-large,
	.media-text--right.media-text--img-medium {
		grid-template-columns: minmax(0, 560fr) minmax(0, 464fr);
	}

	.media-text--right.media-text--img-large,
	.media-text--left.media-text--img-medium {
		grid-template-columns: minmax(0, 464fr) minmax(0, 560fr);
	}

	.media-text--right.media-text--img-small {
		grid-template-columns: minmax(0, 1fr) minmax(0, 272px);
	}

	.media-text--left.media-text--img-small {
		grid-template-columns: minmax(0, 272px) minmax(0, 1fr);
	}
}

.media-text--img-large .media-text__media img,
.media-text--img-medium .media-text__media img,
.media-text--img-small .media-text__media img {
	object-fit: cover;
}

.media-text--img-large .media-text__media img { aspect-ratio: 560 / 276; }
.media-text--img-medium .media-text__media img { aspect-ratio: 464 / 356; }
.media-text--img-small .media-text__media img { aspect-ratio: 272 / 176; }

/* Fit: the half-width image is cropped to the height of the text beside it (Studio "Learning
   through making"). */
@media (min-width: 768px) {
	.media-text--fit .media-text__media {
		position: relative;
		align-self: stretch;
		min-height: 200px;
	}

	.media-text--fit .media-text__media img {
		position: absolute;
		inset: 0;
		height: 100%;
		object-fit: cover;
	}
}

/* Lead: the text set as a large serif statement. */
.media-text--lead .media-text__text {
	font-family: var(--f-display);
	font-size: var(--t-title-s);
	line-height: var(--lh-title-s);
	font-weight: 500;
}

/* Narrow: heading, image and text in a centred 560 px column. */
.wrap.media-text--narrow {
	max-width: calc(560px + 2 * var(--gutter));
	gap: 32px;
}

.media-text--narrow .media-text__media img {
	aspect-ratio: 560 / 292;
	object-fit: cover;
}

@media (min-width: 768px) {
	.media-text--narrow .media-text__head {
		justify-self: center;
		text-align: center;
	}
}

/* Thin lines above and below, as wide as the content column. */
.media-text--rules {
	position: relative;
	padding-block: 60px;
}

.media-text--rules::before,
.media-text--rules::after {
	content: "";
	position: absolute;
	left: var(--gutter);
	right: var(--gutter);
	height: 1px;
	background: var(--c-line);
}

.media-text--rules::before {
	top: 0;
}

.media-text--rules::after {
	bottom: 0;
}

@media (max-width: 767px) {
	.media-text--rules {
		padding-block: 40px;
	}

	.media-text--img-large .media-text__media img { aspect-ratio: 328 / 276; }
	.media-text--img-medium .media-text__media img { aspect-ratio: 328 / 300; }
	.media-text--img-small .media-text__media img { aspect-ratio: 328 / 176; }
	.media-text--narrow .media-text__media img,
	.media-text--fit .media-text__media img {
		aspect-ratio: 328 / 292;
		object-fit: cover;
	}

	.media-text--phone-above .media-text__media {
		order: -1;
	}

	.media-text--phone-below .media-text__media {
		order: 1;
	}
}