@layer base {
	:root {
		/* Calendar Icon */
		--calendar-icon-min-size: 64px;
		--calendar-icon-max-size: 128px;
		--calendar-icon-size: clamp(
			var(--calendar-icon-min-size),
			3vw,
			var(--calendar-icon-max-size)
		);
		--calendar-icon-margin-right: 10px;
	}

	main {
		max-width: 64rem;
		margin-inline: auto;
		padding: 1rem;
		font-size: clamp(1rem, 2.5vw, 1.7rem);
	}
	/* When it's a gallery let's take all the space */
	.gallery main {
		max-width: 100%;
	}

	article {
		padding: 1em;
		/* fallback ffor browsers lh without support */
		padding: 1lh;
	}

	page-list,
	taxonomies-list {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		page-list-item {
			min-width: fit-content;
		}
		&.gallery {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
			gap: clamp(10px, 3vw, 40px);
			margin-bottom: 2rem;
			hr.separator {
				display: none;
				border: 0;
			}
			page-list-item {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
		}
	}

	item-header {
		display: flex;
		flex-direction: row;
		gap: clamp(3px, 2vw, 20px);
	}

	/* Posts */
	main > section {
		margin-bottom: 1rem;
		/* Section Header */
		& > div:first-child {
			display: flex;
			flex-direction: row;
		}
	}
	@media (max-width: 768px) {
		main {
			padding: 1rem;
		}
	}

	post-header {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		.calendar-icon {
			min-width: var(--calendar-icon-min-size);
			min-height: var(--calendar-icon-min-size);
			margin-right: var(--calendar-icon-margin-right);
			max-width: var(--calendar-icon-max-size);
			max-height: var(--calendar-icon-max-size);
			svg {
				width: var(--calendar-icon-size);
				height: var((--calendar-icon-size));
			}
		}
	}

	/* Post Navigation */
	nav.post-navigation {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		a {
			max-width: max-content;
		}
	}
	section.page-paginator {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex-wrap: nowrap;
		nav.paginator {
			flex: 1;
		}
		nav.paginator ul.paginator-list {
			list-style-type: none;
			display: flex;
			flex-direction: row;
			justify-content: space-evenly;
			gap: 0.5rem;
			a {
				max-width: max-content;
			}
			li {
				display: flex;
				flex: 1;
				justify-content: center;
				align-items: center;
				&:hover {
					transform: scale(1.3) translateY(-20%);
					animation-timing-function: ease-in-out;
				}
			}
			.paginator-link {
				flex: 1;
				width: 100%;
				display: inline-block;
				text-align: center;
			}
			.paginator-active {
				transform: scale(1.5);
			}
		}
	}

	/* Video */
	div.session-video {
		width: 100%;
	}
	iframe.youtube-iframe {
		width: 100%;
		aspect-ratio: calc(16 / 9);
	}

	/* audio */
	div.session-audio {
		figure.audio-player {
			place-self: center;
			margin: 2vh 2vw;
			display: flex;
			flex-direction: column;
			audio {
				min-width: 30vmax;
			}
			figcaption {
				place-self: unset;
			}
		}
	}

	/* Calendar Icon */
	div.calendar-icon {
		max-width: var(--calendar-icon-size);
		max-height: var(--calendar-icon-size);
	}

	/* Images */

	figure {
		figcaption {
			font-size: 1.3rem;
			font-style: italic;
			place-self: center;
		}
	}

	/* PDFs */

	canvas.pdf {
		width: 100%;
		min-height: 400px;
	}
}