.hero {
	max-width: 64rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 5%;

	@media (max-width: 800px) {
		grid-template-columns: 1fr;
		grid-row-gap: 2rem;
		
	}
}

.gallery {
	max-width: 64rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
	gap: 4vw;
	margin-top: 2rem;

	@media (max-width: 600px) {
		grid-template-columns: 1fr;
		gap: 6vw;
	}
}

picture {
	box-shadow: 0 15px 30px rgba(20, 26, 31, 0.2), 0 2px 10px rgba(20, 26, 31, 0.05);
}