@layer components {

	.part { padding-block: clamp(2rem, 1vw, 3rem);}
	.part {
		padding-inline: 10%;
	}
	.part > h2, .part > h3, .part > h4 { text-align:center; margin-bottom: var(--space-4) }
	.part:not(.media-object) .details { max-width: 68ch; margin-inline:auto; padding-inline: 10% }
	

	
	#at-a-glance ul {
		display: flex;
		flex-wrap: nowrap;
		column-gap: 1%;
		text-align: center;
		padding: 0;
	}
	
	#at-a-glance ul li {
		flex: 0 0 32%;
		list-style-type: none;
	}
	
	#code-of-conduct a:link, #code-of-conduct a:visited {
		--link-color: #fff;
		color: var(--link-color);
		text-decoration: underline;
	}
	
	@media all and (max-width: 720px) {
		#at-a-glance {
			padding-inline: 0;
		}
	}
	
}