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

		@container content (max-width: 1024px) {
			--column-gap: calc(var(--spacer) * 2);
		}

		@container content (max-width: 768px) {
			img{
				width: 100%;
				max-height: 325px;
				object-fit: cover;
			}
		}

		h1{
			font-weight: 400;
			font-size: 2.75em;
			margin-bottom: calc(var(--spacer) * .5);

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

		.header-content{
			padding-bottom: calc(var(--spacer) * 1.5);

			@container content (max-width: 768px) {
				padding: calc(var(--spacer) * 1.555) calc(var(--container-padding) * 2);
			}
		}
	}

	.service-main-content{
		padding-block: var(--section-padding);

		h2{
			font-family: var(--font-display);
			color: rgba(var(--color-secondary));
		}
	}

	.child-list{
		--color-link: var(--color-blue);
		--color-link-hover: var(--color-blue);
		--color-link-visited: var(--color-blue);
		--column-gap: calc(var(--spacer) * 2);
		--row-gap: calc(var(--spacer) * 2);

		margin-top: calc(var(--spacer) * 2);

		a{
			text-decoration-color: rgba(var(--color-link), .4);

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


		.child-service{
			> div{
				padding: calc(var(--spacer) * 2.222) calc(var(--spacer) * 1.666) 0;
				height: 100%;
				display: flex;
				flex-direction: column;

				/* justify-content: flex-end; */
			}

			h3{
				margin-bottom: var(--spacer);
			}
		}
	}

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

		@container content (max-width: 768px) {
			.leader{
				display: flex;
				column-gap: var(--column-gap);

				img{
					width: 133px;
					aspect-ratio: 1;
					object-fit: cover;
				}
			}

			.leader-actions{
				--row-gap: var(--spacer);

				flex-direction: column;
				row-gap: var(--row-gap);
			}
		}

		.leader-list{
			--column-gap: calc(var(--spacer) * 1.888);
			--row-gap: calc(var(--spacer) * 1.888);

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

		   h3{
				font-size: 1em;
				font-weight: 600;
				margin-block: .5em;
			}

			h4{
				font-size: 0.889em;
				font-weight: 500;
			}
		}

		.leader{
			--flex-width: 100%;

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

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

			@container content (min-width: 769px) {
				--flex-width: calc(1 / 3 * 100%);
			}

			@container content (min-width: 1025px) {
				--flex-width: calc(1 / 5 * 100%);
			}

			a{
				text-decoration-color: transparent;
				display: inline-block;

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

	.service-promo{
		@container content (max-width: 768px) {
			padding-top: 0;
		}

		.background-image-caption{
			left: 0;
			right: 66vw;
			text-align: right;
		}
	}
}