/* ================= IMAGES ================= */


.grid {
	display: grid;
	grid-template-columns: 50vw 50vw;
	grid-template-rows: 50% 50%;
	height: calc(100vh - var(--topbar-height));
	max-height: calc(100vh - var(--topbar-height));
	/* min-height: clamp(700px, 60vw, 750px); */
	min-height: 750px;
}

.cell {
	position: relative;
	overflow: hidden;
	display: flex;
}

/* Base style for all corner images */
.cell img {
	width: clamp(80px, 15vw, 200px);
	height: auto;
}

.top-left {
	justify-content: flex-start;
	align-items: flex-start;
}
.top-right {
	justify-content: flex-end;
	align-items: flex-start;
}
.bottom-left {
	justify-content: flex-start;
	align-items: flex-end;
}
.bottom-right {
	justify-content: flex-end;
	align-items: flex-end;
}


/* ================= TEXT ================= */

main a {
	font-size: clamp(28px, 3cqw, 40px);
	font-family: 'Petit Formal Script', cursive;
	
	text-align: center;
	line-height: 1.2;

	margin: 0;
	position: absolute;

	color: white;
	text-shadow:
		0 0 0.2em var(--main-color),
		0 0 0.3em #bbff00,
		0 0 0.7em #dbff3d,
		0 0 1.2em #d1ff47;
}

main p {
	font-size: clamp(18px, 2cqw, 24px);
	font-weight: 700;

	text-align: center;
	line-height: 1.2;

	margin: 0;
	width: 25ch;
	
	position: absolute;
	/* Equation for the INCREMENT of the position
	Points: 1200 0 320 x

	m = (-x) / (1200 - 320) = -x / 880
	y = m * (100vw - 1200px)
	*/
	/* (1440, 0) -> (1200, 40) */
	top: calc(130px + max(0px, 0px - 40 / 240 * (100vw - 1440px)));
	left: 50%;
	transform: translateX(-50%);

	color: var(--text-color);
}


.link-1 {
	left: 40%;
	/* (1440, 0) -> (1200, 30) */
	top: calc(250px + max(0px, 0px - 30 / 240 * (100vw - 1440px)));
	transform: translateX(-50%);
}
.link-2 {
	right: 38%;
	/* (1440, 0) -> (1200, 30) */
	top: calc(250px + max(0px, 0px - 30 / 240 * (100vw - 1440px)));
	transform: translateX(50%);
}
.link-3 {
	left: 32%;
	/* (1440, 0) -> (1200, 5) */
	top: calc(380px + max(0px, 0px - 5 / 240 * (100vw - 1440px)));
	transform: translateX(-50%);
}
.link-4 {
	right: 40%;
	/* (1440, 0) -> (1200, 5) */
	top: calc(410px + max(0px, 0px - 5 / 240 * (100vw - 1440px)));
	transform: translateX(50%);
}
.link-5 {
	left: 50%;
	/* (1440, 0) -> (1200, -5) */
	top: calc(520px - max(0px, 0px - 5 / 240 * (100vw - 1440px)));
	transform: translateX(-50%);
}
.link-6 {
	left: 35%;
	/* (1440, 0) -> (1200, -30) */
	top: calc(650px - max(0px, 0px - 30 / 240 * (100vw - 1440px)));
	transform: translateX(-50%);
}
.link-7 {
	right: 35%;
	/* (1440, 0) -> (1200, 5) */
	top: calc(620px - max(0px, 0px - 5 / 240 * (100vw - 1440px)));
	transform: translateX(50%);
}


/* ================= RESPONSIVE ================= */

@media (max-width: 1200px) {
	main a {
		font-size: clamp(20px, 4cqw, 50px);
	}

	main p {
		font-size: clamp(16px, 4cqw, 32px);
		/* (1200, 0) -> (320, 70) */
		top: calc(130px + max(0px, 0px - 70 / 880 * (100vw - 1200px)));
	}

	.link-1 {
		left: 25%;
		/* (1200, 0) -> (320, 40) */
		top: calc(250px + max(0px, 0px - 40 / 880 * (100vw - 1200px)));
		transform: translateX(-50%);
	}
	.link-2 {
		right: 30%;
		/* (1200, 0) -> (320, 40) */
		top: calc(250px + max(0px, 0px - 40 / 880 * (100vw - 1200px)));
		transform: translateX(50%);
	}
	.link-3 {
		left: 25%;
		/* (1200, 0) -> (320, -30) */
		top: calc(380px - max(0px, 0px - 30 / 880 * (100vw - 1200px)));
		transform: translateX(-50%);
	}
	.link-4 {
		right: 25%;
		/* (1200, 0) -> (320, -30) */
		top: calc(410px - max(0px, 0px - 30 / 880 * (100vw - 1200px)));
		transform: translateX(50%);
	}
	.link-5 {
		left: 47%;
		/* (1200, 0) -> (320, -90) */
		top: calc(520px - max(0px, 0px - 90 / 880 * (100vw - 1200px)));
		transform: translateX(-50%);
	}
	.link-6 {
		left: 28%;
		/* (1200, 0) -> (320, -160) */
		top: calc(650px - max(0px, 0px - 160 / 880 * (100vw - 1200px)));
		transform: translateX(-50%);
	}
	.link-7 {
		right: 25%;
		/* (1200, 0) -> (320, -140) */
		top: calc(620px - max(0px, 0px - 140 / 880 * (100vw - 1200px)));
		transform: translateX(50%);
	}

}