//  Video Gallery
.video-gallery {
	display: grid;
	gap: 1.5rem;

	&.layout-grid {
	  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	}

	&.layout-slider {
		// Placeholder for slider styling (for JS sliders like Swiper)
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;

		.video-item {
			min-width: 300px;
			scroll-snap-align: start;
			margin-right: 1rem;
		}
	}

	.video-item {
		background: #fff;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		transition: transform 0.3s ease;

		&:hover {
			transform: translateY(-6px);
			box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
		}

		iframe,
		video {
			width: 100%;
			aspect-ratio: 16 / 9;
			border: none;
			display: block;
		}

		h4 {
			font-size: 1rem;
			font-weight: 600;
			margin: 0;
			padding: 1rem;
			color: #333;
			border-top: 1px solid #eee;
		}
	}

	// Responsive tweaks
	@media (max-width: 480px) {
		.video-item h4 {
			font-size: 0.9rem;
			padding: 0.75rem;
		}
	}

	&.layout-grid.columns-2 {
	  	grid-template-columns: repeat(2, 1fr);

	  	@media (max-width: 480px) {
			grid-template-columns: repeat(1, 1fr);
		}
	}

	&.layout-grid.columns-3 {
		grid-template-columns: repeat(3, 1fr);

		@media (max-width: 480px) {
			grid-template-columns: repeat(1, 1fr);
		}
	}

	&.layout-grid.columns-4 {
	  	grid-template-columns: repeat(4, 1fr);

		  @media (max-width: 480px) {
			grid-template-columns: repeat(1, 1fr);
		}
	}
}