main {
		
	> section {
		margin-block: var(--gap);
	}

	> figure:first-of-type {
		display: grid;
		grid-template-columns: var(--grid);
		grid-column: full-width;
		height: 50dvh;
		min-height: 35dvw;
		overflow: clip;
		position: relative;
		margin-block: var(--gap);
		background: linear-gradient(30deg, #fefefe, #ccc);

		@media (max-width: 800px) {
			min-height: 180dvw !important;
		}

		picture {
			grid-column-start: center-end;
			grid-column-end: full-width-end;
			overflow: clip;
			img {
				width: 100%;
				height: 100%;
				object-fit: contain;
				object-position: top right;
				z-index: -1;
			}
		}
		@media(max-width: 800px) {
			picture {
				grid-column-start: full-width-start;
				img {
					object-position: top center;
				}
			}
		}

		figcaption {
			position: absolute;
			inset: 0;
			display: grid;
			align-content: flex-end;
			grid-template-columns: var(--grid);

			* {
				grid-column-start: content-start;
				grid-column-end: center-start;
				margin-block: var(--gap);
				color: var(--teaser-text-color);
				text-shadow: var(--teaser-text-shadow);
				text-wrap: pretty;

				&:not(:first-child) {
					margin-top: 0;
				}
			}
			@media (max-width:800px) {
				* {
					grid-column-end: content-end;
				}
			}
		}
	}

	> nav {
		margin-block: var(--gap);
		padding-block: var(--gap);
		display: grid;
		grid-template-columns: var(--columns-fill-4);
		align-content: space-around;
		align-items: flex-start;
		justify-content: space-around;
		gap: var(--gap);

		a {
			font-size: 1.2em;
			display: flex;
			gap: calc(var(--gap) / 2);
			align-content: center;
			align-items: center;
			justify-content: center;
			
			@media(max-width:800px) {
				align-content: flex-start;
				justify-content: flex-start;
				text-align: left;
				padding-left: var(--gap);
			}
			
			* {
				transition: all .25s ease-in-out !important;
			}
			
			&:before,
			&:after {
				display: none !important;
			}
		}
	}
}