@layer views {
	main > header{
		padding-block: var(--section-padding) var(--spacer);
	}

	.featured-content-section{
		--color-link: var(--color-text);
		--color-link-hover: var(--color-text);
		--color-link-visited: var(--color-text);
		--column-gap: calc(var(--spacer) * 3.75);

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

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

			h3{
				font-size: 1.5em;
				margin-bottom: calc(var(--spacer) * .5);

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

			img{
				margin-bottom: var(--spacer);

				@container content (max-width: 768px){
					aspect-ratio: 1;
					object-fit: cover;
				}

				@container content (min-width: 600px) and (max-width: 768px){
					aspect-ratio: 3 / 2;
				}
			}
		}

		.secondary-featured-item{
			--column-gap: var(--spacer);

			@container content (min-width: 600px) and (max-width: 900px){
				> div{
					--flex-width: calc(1 / 3 * 100%);

					+ div{
						--flex-width: calc(2 / 3 * 100%);
					}
				}
			}

			@container content (max-width: 768px){
				img{
					width: 100%;
				}
			}

			margin-bottom: var(--spacer);

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

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