/* -------------------- FIRST -------------------- */

#first {
	display: block;
	margin-bottom: 4vw;
	height: 45vw;
	width: 100%;
/* */
	background: url(first.webp) no-repeat center center;
	background-size: cover;
}

#first span {
	position: relative;
	padding: 0.5vw 1vw;
	left: 2vw;
	top: 41vw;
/* */
	text-transform: uppercase;
	font-family: 'JetBrains', monospace;
	font-weight: 500;
	font-size: 0.8vw;
	line-height: 1;
	color: #FFFFFF;
/* */
	background: rgba(0,0,0,0.7);
}

/* -------------------- SECOND, 1, 2 -------------------- */

#gallery {
	margin: 3vw 0 1vw 0;
	width: 65vw;
/* */
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: stretch;
	gap: 1vw;
}

#second {
	height: 29vw;
	width: 40vw;
/* */
	background: url(second.webp) no-repeat center center;
	background-size: cover;
}

#second span {
	position: relative;
	padding: 0.5vw 1vw;
	left: 2vw;
	top: 25vw;
/* */
	text-transform: uppercase;
	font-family: 'JetBrains', monospace;
	font-weight: 500;
	font-size: 0.8vw;
	line-height: 1;
	color: #FFFFFF;
/* */
	background: rgba(0,0,0,0.7);
}

#side {
	width: 35%;
}

#pic-one {
	display: block;
	height: 14vw;
	width: 24vw;
/* */
	color: transparent;
	text-transform: uppercase;
	font-family: 'JetBrains', monospace;
	font-weight: 500;
	font-size: 0.8vw;
	line-height: 1;
/* */
	background: url(1.webp) no-repeat center center;
	background-size: cover;
}

#pic-two {
	display: block;
	margin-top: 1vw;
	height: 14vw;
	width: 24vw;
/* */
	color: transparent;
	text-transform: uppercase;
	font-family: 'JetBrains', monospace;
	font-weight: 500;
	font-size: 0.8vw;
	line-height: 1;
/* */
	background: url(2.webp) no-repeat center center;
	background-size: cover;
}

/* -------------------- 3, 4 -------------------- */

#bttm {
	display: block;
	margin: 0 0 3vw 0;
	width: 65vw;
/* */
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;
	align-content: stretch;
	gap: 1vw;
}

#pic-three {
	display: inline-block;
	height: 16vw;
	width: 32vw;
/* */
	color: transparent;
	text-transform: uppercase;
	font-family: 'JetBrains', monospace;
	font-weight: 500;
	font-size: 0.8vw;
	line-height: 1;
/* */
	background: url(3.webp) no-repeat center center;
	background-size: cover;
}

#pic-four {
	display: inline-block;
	height: 16vw;
	width: 32vw;
/* */
	color: transparent;
	text-transform: uppercase;
	font-family: 'JetBrains', monospace;
	font-weight: 500;
	font-size: 0.8vw;
	line-height: 1;
/* */
	background: url(4.webp) no-repeat center center;
	background-size: cover;
}

/* -------------------- MEDIA -------------------- */

@media only screen and (max-width: 1032px) {

}

@media only screen and (max-width: 744px) and (orientation: portrait) {

	#first {
		height: 65vw;
	}

	#first span, #second span {
		display: none;
	}
	
	#gallery, #bttm {
		width: 100%;
	}
	
	#second {
		height: 37vw;
		width: 60vw;
	}
	
	#pic-one, #pic-two {
		height: 18vw;
		width: 32vw;
	}

	#pic-three, #pic-four {
		height: 24vw;
		width: 100%;
	}

}

/* -------------------- PRINT -------------------- */

@media print {

	#first {
		height: 25vw;
	}
	
	#first span {
		top: 21vw;
	}

	#gallery, #bttm {
		display: none;
	}

}