main {
	display: grid;
	height: 100vh;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto;
	column-gap: var(--space-sm--bp-4);
	row-gap: var(--space-lg--bp-4);
}

/* IMAGES */

img {
	width: 100%;
	object-fit: contain;
}

.image-1--1-up,
.image-1--2-up,
.image-2--2-up,
.image-1--3-up,
.image-2--3-up,
.image-3--3-up {
	height: calc(100vh - 32rem);
}

.image-1--1-up {
	grid-column: 4 / span 6;
}

.image-1--2-up {
	grid-column: 2 / span 5;
}

.image-2--2-up {
	grid-column: 7 / span 5;
}

.image-1--3-up {
	grid-column: 1 / span 4;
}

.image-2--3-up {
	grid-column: 5 / span 4;
}

.image-3--3-up {
	grid-column: 9 / span 4;
}

.image-1--3-up-stacked {
	border: 3px solid yellow;
}

.image-2--3-up-stacked,
.image-3--3-up-stacked {
	border: 3px solid cyan;
}

/* FOOTER */

.footer {
	grid-column: 1 / span 12;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-sm--bp-4);
	padding-top: var(--space-sm--bp-4);
	border-top: 0.05em solid var(--black);
	height: 15rem;
}

.footer__left {
	grid-column: 1 / span 1;
}

.footer__left > p {
	font-size: var(--font-sm--bp-4);
	letter-spacing: .03em;
	line-height: 130%;
}

.footer__right {
	grid-column: 2 / span 1;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: var(--space-sm--bp-4);
}

.footer-right__right > p {
	text-align: right;
}

/* BUTTONS */

.prev-button,
.next-button {
	position: absolute;
	top: 0;
	height: 100vh;
	width: 50vw;
}

.next-button {
	left: 50vw;
}

.prev-button {
	left: 0;
}

.next-button:hover {
	cursor: url(../../images/r-point-emoji.png), auto;
}

.prev-button:hover {
	cursor: url(../../images/l-point-emoji.png), auto;
}

@media screen and (max-width: 1000px) {
	main {
		column-gap: var(--space-sm--bp-3);
		row-gap: var(--space-lg--bp-3);
	}

	.image-1--1-up {
		grid-column: 4 / span 6;
	}

	.footer__left > p {
		font-size: var(--font-sm--bp-3);
	}
}

@media screen and (max-width: 700px) {
	main {
		column-gap: var(--space-sm--bp-2);
		row-gap: var(--space-sm--bp-2);
	}

	.image-1--1-up {
		grid-column: 3 / span 8;
	}

	.image-1--2-up,
	.image-2--2-up {
    grid-column: 3 / span 8;
    height: 100%;
	}

	.image-1--3-up {
		grid-column: 1 / span 6;
	}
	
	.image-2--3-up {
		grid-column: 7 / span 6;
	}
	
	.image-3--3-up {
		grid-column: 4 / span 6;
	}

	.image-1--3-up,
	.image-2--3-up,
	.image-3--3-up {
		height: auto;
	}

	.footer {
		gap: var(--space-sm--bp-2);
	}

	.footer__left,
	.footer__right {
		grid-column: 1 / span 2;
	}

	.footer__left > p {
		font-size: var(--font-sm--bp-2);
	}

	.footer__right > p {
		display: inline-block;
		margin-right: var(--space-xs--bp-2);
	}
}

@media screen and (max-width: 400px) {
	main {
		column-gap: var(--space-sm--bp-1);
		row-gap: var(--space-sm--bp-1);
	}

	.image-1--1-up {
		grid-column: 2 / span 10;
	}

	.image-1--2-up,
	.image-2--2-up {
  	grid-column: 2 / span 10;
	}

	.footer__left > p {
		font-size: var(--font-sm--bp-1);
	}
}