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

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

		h2{
			font-weight: 600;
			color: rgba(var(--color-secondary));
		}

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

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

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

			img{
				display: block;
				object-fit: cover;

				@container content (max-width: 1024px){
					height: 100%;
					width: 100%;
				}

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

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

			.primary-featured-content{
				height: 100%;
				padding: calc(var(--spacer) * 2.888) calc(var(--spacer) * 1.888) calc(var(--spacer) * 2.888) calc(var(--spacer) * 2.888);
				display: flex;
				flex-direction: column;
				justify-content: center;

				@container content (max-width: 768px) {
					padding-inline: var(--container-padding);
				}

				.dateline{
					text-transform: unset;
					font-size: 1rem;
					margin-block: var(--spacer);
				}
			}
		}

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

	.post-list{
		.event-image-wrapper{
			position: relative;

			.date{
				position: absolute;
				top: 0;
				left: 0;
				padding: calc(var(--spacer) * .25) calc(var(--spacer) * .5);
				text-transform: uppercase;
				font-size: .888em;
				letter-spacing: 1.4px;
				text-align: center;

				div{
					font-size: 2rem;
					font-weight: 700;
					letter-spacing: unset;
					line-height: 1;
				}
			}
		}
	}
}