@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;
			}
		}
	}

	.featured-service{
		--column-gap: 0;

		padding-block: var(--section-padding);

		h2{
			font-weight: 400;

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

		img{
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.featured-service-content{
			padding: calc(var(--spacer) * 2.333) calc(var(--spacer) * 1.888);
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
		}
	}

	.all-services{
		--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);

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

		padding-bottom: var(--section-padding);

		h3{
			font-size: 1.5em;
			margin-bottom: var(--spacer);

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

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

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

		img{
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.service-item{
			--row-gap: 0;

			@container content (max-width: 1024px) {
				img{
					aspect-ratio: 3 / 2;
				}
			}

			> .row{
				--column-gap: 0;

				background-color: white;
				height: 100%;
			}

			.service-content{
				padding: calc(var(--spacer) * 1.777);
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
			}
		}
	}

	.featured-article{
		--column-gap: 0;

		padding-bottom: var(--section-padding);

		@container content (max-width: 768px) {
			.row {
				flex-direction: column-reverse;
			}
		}

		h2{
			font-weight: 400;
			font-size: 1.888em;

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

		img{
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.featured-article-content{
			padding: calc(var(--spacer) * 2.333) calc(var(--spacer) * 1.888);
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
		}

		.article-actions{
			display: flex;
			align-items: center;
			gap: var(--spacer);
			margin-top: var(--spacer);

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

				flex-direction: column;

				a{
					width: 100%;
				}
			}
		}
	}
}