.wi-single {
	padding-bottom: clamp(5rem, 10vw, 10rem);
	padding-inline: var(--wi-gutter);
}

.wi-single__header {
	padding-block: 200px 0;
}

@media (max-width: 767.98px) {
	.wi-single__header {
		padding-block: 100px 0;
	}

	body #page .wi-single__title {
		font-size: 32px;
		line-height: 1.1;
	}
}

.wi-single__meta {
	color: var(--wp--preset--color--primary);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	display: none;
}

body #page .wi-single__title,
.wi-single__title {
	font-size: var(--wi-font-h1-size);
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin-bottom: 14px;
}

.wi-single__lead {
	font-size: var(--wi-font-paragraph-lg);
	line-height: var(--wi-line-paragraph-lg);
}

.wi-single__hero-image {
	aspect-ratio: 757 / 514;
	display: block;
	margin-top: 32px;
	object-fit: cover;
	width: 100%;
}

.wi-single__content {
	font-size: var(--wi-font-paragraph-sm);
	line-height: var(--wi-line-paragraph-sm);
}

.wi-single__content > * {
	max-width: 100%;
}

.wi-single__content h1 {
	font-size: var(--wi-font-h1-size);
	letter-spacing: -0.03em;
	line-height: var(--wi-line-h1);
	margin-block: 1.5em 0.65em;
}

.wi-single__content h2 {
	font-size: 40px;
	line-height: var(--wi-line-h2);
	margin-block: 1.75em 0.65em;
}

.wi-single__content h3 {
	font-size: 28px;
	line-height: var(--wi-line-h3);
	margin-block: 1.65em 0.65em;
}

.wi-single__content h4,
.wi-single__content h5 {
	margin-block: 1.5em 0.6em;
}

.wi-single__content h4 {
	font-size: var(--wi-font-h4-size);
	line-height: var(--wi-line-h4);
}

.wi-single__content h5 {
	font-size: var(--wi-font-h5-size);
	line-height: var(--wi-line-h5);
}

.wi-single__content h6 {
	font-size: var(--wi-font-h6-size);
	line-height: var(--wi-line-h6);
	margin-block: 1.5em 0.6em;
}

.wi-single__content .has-large-font-size {
	font-size: var(--wi-font-paragraph-xl) !important;
	letter-spacing: -0.01em;
	line-height: var(--wi-line-paragraph-xl);
}

.wi-single__content blockquote {
	border: 0;
	margin: 3rem 0;
	padding: 4rem 0 0;
	position: relative;
}

.wi-single__content blockquote::before {
	color: var(--wp--preset--color--primary-dark);
	content: "\"";
	font-family: "Cormorant", serif;
	font-size: 100px;
	font-style: italic;
	left: 0;
	line-height: 1;
	position: absolute;
	top: -1rem;
}

.wi-single__content blockquote p {
	font-size: var(--wi-font-paragraph-xl);
	font-style: italic;
	line-height: var(--wi-line-paragraph-xl);
}

.wi-single__content .has-medium-font-size {
	font-size: var(--wi-font-paragraph-md) !important;
	line-height: var(--wi-line-paragraph-md);
}

.wi-single__content .has-small-font-size {
	font-size: var(--wi-font-paragraph-sm) !important;
	line-height: var(--wi-line-paragraph-sm);
}

.wi-single__content ul {
	list-style: none;
	padding-left: 0;
}

.wi-single__content li {
	margin-bottom: 0.65rem;
	padding-left: 1.5rem;
	position: relative;
}

.wi-single__content li::before {
	background: var(--wp--preset--color--primary);
	content: "";
	height: 8px;
	left: 0;
	position: absolute;
	top: 0.45em;
	width: 8px;
}

.wi-single__content table {
	border-collapse: collapse;
	margin-block: 2rem;
	width: 100%;
}

.wi-single__content td,
.wi-single__content th {
	border: 1px solid var(--wp--preset--color--muted);
	padding: 1rem;
	text-align: left;
}

.wi-single__content .wp-block-image {
	margin-block: 3rem;
}

/* Figma: the gallery breaks out of the 757px article column to the full
   content grid, with a 20px gutter. */
.wi-single__gallery,
.wi-single__content .wp-block-gallery {
	display: grid;
	gap: 20px;
	margin-inline: auto;
	margin-top: clamp(5rem, 10vw, 10rem);
	max-width: var(--wi-container);
	width: 100%;
}

.wi-single__gallery img,
.wi-single__content .wp-block-gallery img {
	aspect-ratio: 16 / 9;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

@media (min-width: 768px) {
	.wi-single__gallery,
	.wi-single__content .wp-block-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wi-single__gallery img:first-child,
	.wi-single__content .wp-block-gallery figure:first-child {
		grid-column: 1 / -1;
	}

	.wi-single__gallery img:first-child {
		aspect-ratio: 1340 / 617;
	}
}