
.multiple-images-component {
	padding: 1rem;
	position: relative;
	overflow: hidden;
}

.multiple-images-component--wrap {
	position: relative;
}

.multiple-images--image-2, .multiple-images--image-3 {
	display: none;
}

@media screen and (min-width: 768px) {
	.multiple-images-component {
		padding: 2rem 1rem 0 1rem;
	}
	
	.multiple-images-component--wrap {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}
	
	.multiple-images--image-1, .multiple-images--image-2, .multiple-images--image-3 {
		transition: transform 500ms ease-in-out;
	}
	
	.multiple-images--image-1:hover, .multiple-images--image-2:hover, .multiple-images--image-3:hover {
		transform: scale(1.05);
	}
	
	.multiple-images--image-1, .multiple-images--image-3 {
		width: 49%;
		display: block;
	}
	
	.multiple-images--image-2 {
		width: 22%;
	}
}

@media screen and (min-width: 992px) {
	.multiple-images-component {
		padding: 2rem 2rem 0 2rem;
	}
}

@media screen and (min-width: 1200px) {
	.multiple-images-component {
		padding: 3rem 3rem 0 3rem;
	}
	
	.multiple-images--image-1, .multiple-images--image-3 {
		width: 40%;
	}
	
	.multiple-images--image-2 {
		width: 20%;
		padding: 0 1rem;
		display: block;
	}
}

@media screen and (min-width: 1440px) {
	.multiple-images-component {
		padding: 3rem 4rem 0 4rem;
	}
	
	.multiple-images--image-1, .multiple-images--image-3 {
		width: 33%;
	}
	
	.multiple-images--image-2 {
		width: 30%;
		padding: 0;
	}
}

@media screen and (min-width: 1600px) {
	.multiple-images-component {
		padding: 5rem 6rem 0 6rem;
	}
	
	.multiple-images--image-1:hover, .multiple-images--image-2:hover, .multiple-images--image-3:hover {
		transform: scale(1.1);
	}
	
	.multiple-images--image-1, .multiple-images--image-3 {
		width: 32%;
	}
	
	.multiple-images--image-2 {
		width: 33%;
	}
}
