/* https://www.youtube.com/watch?v=rnhoY5Cdmy0 */

body {
  font-family: "Nunito", sans-serif;
  color: #333;
  font-weight: 300;
  line-height: 1.6; 
}

.container {
  width: 70%;
  margin: 2rem auto; 
}

/* set gap between photos and default number of columns */
.image-grid {
	--gap: 15px;
	--num-cols: 2;
	--row-height: 300px;

	box-sizing: border-box;
	padding: var(--gap);
	
	display: grid;
	grid-template-columns: repeat(var(--num-cols), 1fr);
	grid-auto-rows: var(--row-height);
	gap: var(--gap);
}

.image-grid > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* for an image to span 2 columns */
.image-grid-col-2 {
	grid-column: span 2;
}

/* for an image to span 2 rows */
.image-grid-row-2 {
	grid-row: span 2;
}