body.resume > .main .about-enumerated-skills {
	display: flex;
	flex-wrap: wrap;
	row-gap: var(--length-block-element-vertical-margin);
}
body.resume > .main .about-enumerated-skills .skill-set {
	width: 50%;
	min-width: 20em;
}

body.resume > .main ol.dated-items {
	list-style: none;
	padding-left: 0;
	container-type: inline-size;
}
body.resume > .main ol.dated-items .date::before {
	content: "— "
}
/* This breakpoint depends somewhat on the length of the longest dated item. */
@container (max-width: 80ch) {
	body.resume > .main ol.dated-items .date {
		display: block;
		margin-bottom: 10px;
	}
	body.resume > .main ol.dated-items .date::before {
		content: ""
	}
}

@media print {
	/* HACK: Make the skill lists look a bit better in print. This depends on the
	   margin-top of sections on this page, which is currently 25px (specified in
		 another stylesheet). */
	body.resume > .main .about-enumerated-skills {
		margin-top: 15px;
	}

	body.resume > .main article p:last-child {
		margin-bottom: 30px;
	}

	/* HACK Use table layout shenanigans to repeat "Selected Projects" header on
	   every page where the projects spill over.
	    - Is there a nicer way to do this?
	    - Should this be generalized to any section?
	*/
	body.resume > .main .selected-projects {
		display: table;
		table-layout: fixed;
	}
	body.resume > .main .selected-projects > h1 {
		display: table-header-group;
	}
	body.resume
		> .main
		.selected-projects
		> h1
		.ugly-hack-for-selected-projects-header {
		display: block;
		padding-bottom: 30px;
	}
	body.resume > .main .selected-projects article {
		display: table-row;
	}
}