* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	transition: 0.75s ease;
}
.container {
	min-height: 100vh;
	display: grid;
	place-items: center;
	gap: 4rem;
	background: #1d2a3a;
}
#grid {
	width: calc(100% - 20vmin);
	aspect-ratio: 16 / 7;
	background: linen;
	display: grid;
	grid-template-columns: 1fr 0fr 1fr;
	place-items: center;
	outline: 2px solid #e3a019;
	border-radius: 2px;
	box-shadow: 0 1rem 2rem -1rem rgba(68 50 4 / 1);
	overflow: hidden;
}
.left,
.right,
.middle {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	transform-origin: center;
}
.left {
	background-image: url("https://repositorium-theatrum-net.s3.amazonaws.com/tpj/animals/vulture/1.jpeg");
}
.middle {
	font-size: 0rem;
	background-image: url("https://repositorium-theatrum-net.s3.amazonaws.com/tpj/animals/sheep/1.jpeg");
}
.right {
	background-image: url("https://repositorium-theatrum-net.s3.amazonaws.com/tpj/animals/vulture/4.jpeg");
}

#grid:hover {
	grid-template-columns: 0fr 1fr 0fr;
}