/* The closing invitation: heading, copy and one action; the office beside it. */
@layer blocks {
	.introduction__letter {
		display: grid;
		gap: var(--space-12);
	}

	.introduction .section-head__title {
		max-width: 14em;
	}

	.introduction__copy {
		display: grid;
		gap: var(--space-4);
		max-width: 44ch;
		margin-top: var(--space-6);
		color: var(--muted-foreground);
	}

	.introduction__action {
		margin-top: var(--space-10);
	}

	/* The office, set like the draft's addresses: serif name, quiet lines. */
	.introduction__address .contact-block {
		gap: var(--space-4);
	}

	.introduction__address .contact-block__address::first-line {
		font-family: var(--font-heading);
		font-size: var(--type-h4-size);
		line-height: var(--type-h4-line);
		color: var(--heading);
	}

	.introduction__address .contact-block__address {
		line-height: var(--space-6);
	}

	.introduction__address .contact-block__direct {
		padding-top: var(--space-4);
		box-shadow: inset 0 1px var(--hairline);
	}

	.introduction__media {
		margin: 0 0 var(--section-gap);
	}

	.introduction__image {
		width: 100%;
		height: 16rem;
		object-fit: cover;
	}

	.introduction__caption {
		padding-top: var(--space-3);
		max-width: none;
	}

	@media (min-width: 64rem) {
		.introduction__letter {
			grid-template-columns: repeat(12, minmax(0, 1fr));
			column-gap: var(--grid-gap);
		}

		.introduction__content {
			grid-column: 1 / 7;
		}

		.introduction__address {
			grid-column: 9 / -1;
			padding-top: var(--space-8);
		}

		.introduction__image {
			height: 24rem;
		}
	}
}