/* Metro Grid Widget Styles */

.metro-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
	width: 100%;
	padding: 0;
	margin: 0;
}

/* Portrait media - 1 column */
.metro-grid-item-portrait {
	grid-column: span 1;
}

/* Landscape media - 2 columns */
.metro-grid-item-landscape {
	grid-column: span 2;
}

/* Square media - 1 column */
.metro-grid-item-square {
	grid-column: span 1;
}

/* Grid item styling */
.metro-grid-item {
	position: relative;
	overflow: hidden;
	background-color: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Image styling */
.metro-grid-item img {
	width: 100%;
	height: 300px;
	object-fit: cover;
	display: block;
	transition: all 0.3s ease;
}

/* Video styling */
.metro-grid-item video {
	width: 100%;
	height: 300px;
	object-fit: cover;
	display: block;
	transition: all 0.3s ease;
}

/* Embedded video (iframe) styling */
.metro-grid-item iframe {
	width: 100%;
	height: 300px;
	border: none;
	display: block;
	transition: all 0.3s ease;
}

/* Hover Effects */

/* Zoom hover effect */
.metro-grid-hover-zoom .metro-grid-item:hover img,
.metro-grid-hover-zoom .metro-grid-item:hover video {
	transform: scale(1.05);
}

/* Fade hover effect */
.metro-grid-hover-fade .metro-grid-item:hover img,
.metro-grid-hover-fade .metro-grid-item:hover video {
	opacity: 0.8;
}

/* Shadow hover effect */
.metro-grid-hover-shadow .metro-grid-item:hover {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Responsive Design */

/* Desktop and Tablet (768px and up) - 2 columns */
@media (min-width: 768px) {
	.metro-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.metro-grid-item-portrait {
		grid-column: span 1;
	}

	.metro-grid-item-landscape {
		grid-column: span 2;
	}

	.metro-grid-item-square {
		grid-column: span 1;
	}
}

/* Mobile (below 768px) - 1 column */
@media (max-width: 767px) {
	.metro-grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.metro-grid-item-portrait {
		grid-column: span 1;
	}

	.metro-grid-item-landscape {
		grid-column: span 1;
	}

	.metro-grid-item-square {
		grid-column: span 1;
	}

	.metro-grid-item img,
	.metro-grid-item video,
	.metro-grid-item iframe {
		height: 200px;
	}
}