@charset "UTF-8";
/* CSS Document */

.containerGrid > div {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
}

.containerGrid > div > img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.containerGrid {
	display: grid;
	grid-gap: 5px;
	grid-template-columns: repeat(auto-fit, minmax(316px, 1fr));
	grid-auto-rows: 474px;
	grid-auto-flow: dense;
}

.square {
	grid-column: span 3;
	grid-row: span 2;
}

.hor {
	grid-column: span 2;
}

.h4x8 {
	grid-column: span 3;
}

.panoramic {
	grid-column: span 5;
}

.v4x12 {
	grid-row: span 2;
}


	@media screen and (max-width: 991px) {
		.containerGrid {
			grid-gap: 4px !important;
			grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)) !important;
			grid-auto-rows: 348px !important;
		}
	}

	@media screen and (max-width: 767px) {
		.containerGrid {
			grid-gap: 3px !important;
			grid-template-columns: repeat(auto-fit, minmax(166px, 1fr)) !important;
			grid-auto-rows: 249px !important;
		}
	}
	
	@media screen and (max-width: 576px) {
		.containerGrid {
			grid-gap: 2px !important;
			grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)) !important;
			grid-auto-rows: 174px !important;
		}
	}
	
	@media screen and (max-width: 375px) {
		.containerGrid {
			grid-gap: 1px !important;
			grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)) !important;
			grid-auto-rows: 135px !important;
		}
	}