@layer views {
	main > header{
		--column-gap: calc(var(--spacer) * 3);

		position: relative;
		padding-block: var(--section-padding) calc(var(--section-padding) * .5);

		@container content (max-width: 768px) {
			padding-block: 0;

			.row > [class*="col-"] > div{
				padding: calc(var(--spacer) * 1.555) var(--container-padding);
			}
		}

		&:before{
			--min-less-padding: calc(min(100%, var(--container-max-width)) - var(--container-padding));

			content: '';
			position: absolute;
			z-index: -1;
			width: calc(50vw - (var(--min-less-padding) / 2) + (var(--min-less-padding) * .333));
			inset: 0 auto 0 0;
			background-color: rgba(var(--color-blue));

			@container content (max-width: 768px) {
				content: none;
			}
		}
	}

	.person-list{
		--row-gap: calc(var(--spacer) * 2.5);
		--column-gap: calc(var(--spacer) * 1.5);

		@container content (max-width: 768px) {
			--row-gap: var(--spacer);

			section:not(.leadership-section) &{
				max-height: 600px;
				overflow: hidden;
				transition: max-height .3s;
			}
		}
	}

	.person-item{
		section:not(.leadership-section) &{
			--flex-width: 100%;

			flex: 0 0 var(--flex-width);
			max-width: var(--flex-width);
		}

		img{
			width: 100%;
			display: block;

			section.leadership-section &{
				margin-bottom: calc(var(--spacer) * .333);
			}

			@container content (max-width: 768px) {
				section:not(.leadership-section) &{
					width: 100px;
					max-width: none;
					aspect-ratio: 1;
					object-fit: cover;
				}
			}
		}

		a{
			text-decoration-color: transparent;
			font-weight: 700;
			display: inline-block;
			margin-bottom: calc(var(--spacer) * .333);

			&:hover{
				text-decoration-color: rgba(var(--color-link-hover), .4);
			}
		}

		> a{
			display: block;
		}
	}

	@container content (min-width: 600px) and (max-width: 769px){
		.person-item{
			--flex-width: calc(1 / 2 * 100%);
		}
	}

	@container content (min-width: 769px) {
		section:not(.leadership-section) .person-item{
			--flex-width: calc(1 / 3 * 100%);
		}
	}

	@container content (min-width: 1025px) {
		section:not(.leadership-section) .person-item{
			--flex-width: calc(1 / 5 * 100%);
		}
	}

	@container content (max-width: 768px) {
		section:not(.leadership-section) .person-item{
			display: flex;
			column-gap: calc(var(--column-gap) * .777);
			align-items: center;
		}
	}

	.leadership-section,
	.global-section{
		padding-block: var(--section-padding);

		h2{
			color: rgba(var(--color-secondary));

			@container content (max-width: 768px){
				font-size: 1.666em;
			}
		}
	}

	.regional-section{
		padding-top: var(--section-padding);

		h2{
			font-size: 1.125em;
			font-weight: 600;
			margin-bottom: 1.25rem;
		}

		h3{
			font-size: 2.25em;
			margin-bottom: 1.8rem;
			color: rgba(var(--color-secondary));

			@container content (max-width: 768px){
				font-size: 1.666em;
			}
		}
	}

	.region:not(:last-child){
		padding-bottom: var(--section-padding);
	}

	.load-more > div{
		color: rgba(var(--color-secondary));
		display: none;
		margin-top: var(--spacer);

		@container content (max-width: 768px){
			display: block;
		}

		&:after{
			content: '\00a0\00a0\f078';
			font-family: var(--font-icon);
		}
	}
}