/*
 * Statement (Figma: Home "Frame 152" SAORI; Studio "Always Becoming" and "Loom systems at the
 * studio"; Our Approach "Frame 179", the quote under a short vertical line).
 */

.statement {
	display: grid;
	gap: 32px;
}

.statement__inner {
	display: grid;
	justify-items: center;
	gap: 32px;
	text-align: center;
}

.statement__text {
	display: grid;
	justify-items: center;
	gap: 16px;
}

.statement__heading {
	max-width: 752px;
}

.statement--xl .statement__heading {
	font-size: var(--t-display);
	line-height: var(--lh-display);
}

.statement--l .statement__heading {
	max-width: 560px;
	font-size: var(--t-title-l);
	line-height: var(--lh-title-l);
}

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

.statement__body {
	max-width: 560px;
	color: var(--c-text-2);
}

.statement--text-wide .statement__body {
	max-width: var(--wrap-narrow);
}

.bg-dark .statement__body {
	color: inherit;
}

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

.statement__divider {
	width: 1px;
	height: 60px;
	background: var(--c-line);
}

.statement__buttons {
	justify-content: center;
}

/* A row of text links sits under a thin rule as wide as the row (a single link has no rule:
   Looms & Tools "Talk to us to find the best loom for you"). */
.statement__buttons:has(> .btn--tertiary + .btn--tertiary) {
	gap: 32px;
	padding-top: 16px;
	border-top: 1px solid var(--c-line);
}

.statement__media img {
	width: 100%;
}

.statement__above img {
	width: 272px;
	aspect-ratio: 1;
	object-fit: cover;
}

@media (max-width: 767px) {
	.statement__buttons:has(> .btn--tertiary + .btn--tertiary) {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.statement__buttons .btn--tertiary {
		justify-content: space-between;
	}

	.statement__media img {
		aspect-ratio: 328 / 348;
		object-fit: cover;
	}
}

/* A low strip, at every width (after the phone crop above). */
.statement__media--strip img {
	height: 250px;
	aspect-ratio: auto;
	object-fit: cover;
}