feature-grid {

	.intro {
		max-width: 45ch;
	}

	.portrait {
		position: relative;
		display: block;
		border-radius: var(--fill-corners);
		overflow: clip;
		border: var(--border);
	}

	.item-list {
		display: grid;
		row-gap: 50px;
	}

	article {
		p {
			margin-top: 0.12em;
		}
	}

	picture + h3 {
		margin-top: 0.5em;
	}

	@media (width < 750px) {
		.item-list {
			margin-top: 50px;
		}

		article {
			max-width: 450px;
		}
	}

	@media (width >= 750px) {
		display: grid;
		grid-template-columns: subgrid;
		grid-column: 1 / -1;
		align-items: start;
		/* column-gap inherited from inner-column. */

		.intro {
			grid-column: 1 / -1;
		}

		.item-list {
			grid-template-columns: subgrid;

			grid-column: 1 / -1;

			margin-top: 40px;
		}

		.item {
			grid-column: span 6;
		}
	}

	@media (width >= 1200px) {
		.intro {
			grid-column: 1 / 4;

			position: sticky;
			top: 100px;

			padding-bottom: 260px;
			max-width: 28ch;
		}

		.item-list {
			grid-column: 4 / -1;
			margin-top: 10px;
		}

		.item {
			grid-column: span 4;
		}
	}
}