/* HTML ELEMENTS */

[] {}

	html {
		background: var(--color_background);
		color: var(--color_text);
		font-family: var(--font_family);
		font-size: var(--font_size);
		letter-spacing: var(--letter_spacing);
		line-height: var(--line_height);
		font-weight: var(--font_weight);
	}

	body {
		padding: 4vw;
	}

	a {
		color: var(--color_text);
		text-decoration: none;
	}

	a:hover {
		text-decoration: underline;
	}

/* LAYOUT */

[] {}

	div.page {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 4vw 2vw;
	}

	a.logo {
		grid-column: 1/-1;
		display: flex;
	}

	div.info {
		/* display: grid; */
		/* grid-template-columns: repeat(4, 1fr); */
		/* gap: 2vw; */
		display: contents;
	}

	div.menu {
		position: sticky;
    top: 4vw;
	}

	div.menu a {
		display: block;
	}

	div.content {
		grid-column: 2/-1;

	}

	div.thumbs {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 2vw;
		align-items: start;
	}








/* TEMPLATE ELEMENTS */

[] {}

	img.logo {
		max-height: max(4rem, 8vw);
	}

	div.thumbs a{
		overflow: hidden;
	}

	div.thumbs a:hover img{
		scale: 1.1;
	}

	div.content .thumbs img {
		width: 100%;
		scale: 1;
		transition: scale .25s ease-out;
	}