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

		padding-block: calc(var(--spacer) * 1.5);

		h1{
			font-size: 2.25em;

			@container content (max-width: 768px){
				font-size: 2em;
				margin-top: var(--spacer);
			}
		}

		.job-title{
			font-size: 1.125em;
		}

		.person-detail{
			margin-top: var(--spacer);

			p{
				margin-bottom: calc(var(--spacer) * .5);
			}

			.detail-heading{
				margin-block: var(--spacer) calc(var(--spacer) * .25);
			}
		}

		.more-areas,
		.less-areas{
			margin-block: calc(var(--spacer) * .333);
			cursor: pointer;

			span{
				font-family: var(--font-icon);
			}
		}

		.less-areas{
			display: none;

			span{
				position: relative;
				top: 3px;
			}
		}

		.additional-areas{
			display: none;
		}
	}

	.about-section{
		padding-top: var(--section-padding);
	}

	.articles-section{
		--color-link: var(--color-text);
		--color-link-hover: var(--color-text);
		--color-link-visited: var(--color-text);
		--container-max-width: 1154px;

		@container content (min-width: 769px) and (max-width: 1024px) {
			--container-max-width: 85%;
		}

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

		header{
			padding-block: var(--section-padding);
		}

		img{
			display: block;
			width: 100%;

			@container content (max-width: 768px) {
				margin-bottom: var(--spacer);
			}
		}

		h2{
			color: rgba(var(--color-secondary));
			margin-bottom: 0;
		}

		h3{
			margin-bottom: calc(var(--spacer) * .5);

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

		.post-item:not(:last-child){
			margin-bottom: calc(var(--spacer) * 2);
		}
	}
}