:root {
	--mobile-width: 80em;
}

.info h3, .info h4 {
	margin: 0;
	font-weight: inherit;
	font-size: inherit;
}

body {
  overflow-y: scroll; /* Show vertical scrollbar */
}

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

div.page {
	/* display: grid; */
	/* grid- */
	/* gap: 4vw 2vw; */
	position: relative;
	grid-template-areas: "header header header header" "info info info info" "menu content content content"
}

@media screen and (max-width: 40em) {
	html div.page {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "header header" "info info" "menu content";

		/* gap: 4vw 2vw; */
	}

	div.content {
		/* grid-column: 1; */
	}


	div.thumbs {
    grid-template-columns: 1fr;
	}

	div.info {
    display: grid;
    grid-column: 1/-1;
    grid-template-columns: 1fr 1fr;
		gap: 0 2vw;
		position: relative;
	}

	div.info div.column {
		display: grid;
		gap: 2vw;
	}

	.info_text {
		position: absolute;
	}

	.info_agency, .info_brand, .info_pitch {
		grid-column: 2/3;
		grid-template-columns: 7ch 1fr;
		/* grid-row: 1/2; */
	}

}



p {
	margin-top: 0;
}

a {
	transition: color .25s ease-out;
}

a:hover {
	color: #ff0000;
	text-decoration: none;
}

.thumbs .entry {
	display: flex;
	flex-direction: column-reverse;
	counter-increment: css-counter 1;
}

.thumbs {
    counter-reset: css-counter 0;
}

.thumbs a img {
	display: block;
}

.entry p:before {
    content: counter(css-counter);
    display: block;
}

.menu a.active:not(:hover) {
	/* color: #ff0000; */
}


div.image {
	/* display: grid; */
	/* grid-template-columns: [image] 1fr; */
}

div.text {
	margin-bottom: 4vw;
}

div.text > * {
	margin-top: 0;
}

div.menu div.download {
	margin-top: 4vw;
}

html body {
	padding: 5vw 1vw;
}

html img.logo {
	max-height: none;
	width: 100%;

}

html body {
	font-family: 'Nitti', var(--font_family);
}

html body {
	font-family: 'Nitti', var(--font_family);
}

div.menu img {
	/* display: none; */
	grid-area: content;
	position: absolute;
	width: calc(((100% - 4vw) / 3) + 2vw + 5ch);
	left: 0;
	top: 0;
	display: none;
	height: 0;
	opacity: 0;

	transition: 500ms;
	transition-property: opacity;
	transition-delay: 70ms;
	z-index: 1;
}



html div.menu a {
    display: inline;
}

div.menu span.image {
	display: grid;
}

.content {
	opacity: 1;
	transition: 500ms;
	transition-delay: 70ms;
}

.download {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.content :is(h1,h2,h3,h4,h5,h6) {
	line-height: calc(var(--line_height) * 1rem);
}

@media screen and (min-width: 40em) {
	body:has(.pool a:hover) .content {
		opacity: 0;
	}
	div.menu a img {
		display: block;
	}
	div.menu a:hover img {
		/* display: block; */
		opacity: 1;
		height: auto;
	}
	div.text {
		width: calc(((100% - 4vw) / 3) + 2vw + 5ch);
	}
	html img.logo {
		width: calc(((100% - 6vw) / 2) + 4vw + 5ch);
	}
	html div.menu {
	    position: static;
	    top: 0;
	}
}