pillars-grid {
	/* Subgrid the page's 12-col tracks so the intro and the 3 cards
	   below land on real column lines. Each card spans 4 cols at the
	   wide breakpoint (12 / 3 = 4). */
	display: grid;
	grid-template-columns: subgrid;
	row-gap: 40px;

	.intro {
		grid-column: 1 / -1;
		max-width: 45ch;

		@media (width < 900px) {
			.tech-intro-break {
				display: none;
			}
		}
	}

	.item-list {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: subgrid;
		padding: 0;
		margin: 0;
		list-style: none;

		row-gap: 50px;
	}

	.item {
		grid-column: 1 / -1;
		list-style: none;

		h3 {
			margin-top: 0.7em;
		}

		p {
			margin-top: 0.3em;
		}
	}

	.portrait {
		display: flex;
		align-items: center;
		justify-content: center;
		
		padding: 10% 4%;
		background: var(--fill-secondary);
		border-radius: var(--fill-corners);
		overflow: clip;
		border: var(--border);

		img {
			display: block;
			max-width: 100%;
			max-height: 100%;
			width: auto;
			height: auto;
			object-fit: contain;
		}
	}



	@media (width >= 700px) {
		.item {
			grid-column: span 4;
		}

		.portrait {
			aspect-ratio: 4 / 4;
		}
	}
}