/* ================= PAGE GRID ================= */

.layout {
	max-width: 1500px;
	margin: 0 auto;
	padding: 40px 20px;

	display: grid;
	grid-template-columns: auto auto;
	grid-template-rows: auto 1fr;

	column-gap: 80px;
	row-gap: 60px;

	align-items: start;
	box-sizing: border-box;
}


/* make hero elements belong directly to grid */
.hero-container {
	display: contents;
}


/* ================= TITLE ================= */

.hero {
	grid-column: 1;
	grid-row: 1;

	text-align: center;

	font-size: clamp(60px, 8vw, 128px);
	font-weight: 10;
	font-family: 'Petit Formal Script', cursive;
	letter-spacing: 1px;
	margin: 0;

	color: white;
	text-shadow:
		0 0 0.05em var(--main-color),
		0 0 0.1em #bbff00,
		0 0 0.2em #dbff3d,
		0 0 0.4em #d1ff47;
}

.hero-img {
	grid-column: 2;
	grid-row: 1;
	justify-self: center;

	width: clamp(180px, 15vw, 240px);
	height: auto;
}


/* ================= BODY ================= */

main p {
	grid-column: 1;
	grid-row: 2;

	font-size: clamp(18px, 2cqw, 32px);
	line-height: 1.6;
	margin: 0;
	color: var(--text-color);
	font-weight: 1000;

	/* keeps line breaks stable */
	max-width: 60ch;
}

.main-img {
	grid-column: 2;
	grid-row: 2;

	display: flex;
	flex-direction: column;
	align-items: center;
}
.main-img img {
	width: clamp(180px, 15vw, 240px);
	height: auto;
}
.main-img > img:first-of-type {
	margin-bottom: 40px;
}

main a:link {
	color: var(--text-color);
}
main a:visited {
	color: var(--text-color);
}
main a:hover {
	color: var(--text-color);
}
main a:active {
	color: var(--text-color);
}


/* ================= RESPONSIVE <1200px ================= */

@media (max-width: 1200px) {

	.layout {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		row-gap: 40px;
		max-width: 99%;
		align-items: center;
	}

	.hero {
		grid-column: 1;
		grid-row: auto;
		text-align: center;
		font-size: clamp(40px, 20vw, 128px);
	}

	.hero-img {
		grid-column: 1;
		grid-row: auto;
		width: clamp(200px, 25vw, 240px);
	}

	main p {
		grid-column: 1;
		grid-row: auto;
		margin-top: 20px;
		max-width: 1000ch;
		font-size: clamp(26px, 4cqw, 32px);
	}

	.main-img {
		grid-column: 1;
		grid-row: auto;
	}
}