/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Hanlding Updates
-----------------------------------------------------------------*/


/* ===== Gallery Responsive Grid ===== */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 12px;
}

.gallery-item {
	position: relative;
	overflow: hidden;
	border-radius: 6px;
	background: #f2f2f2;
}

	.gallery-item::before {
		content: "";
		display: block;
		padding-top: 70%;
	}

	.gallery-item img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform .3s ease;
	}

@media (hover: hover) {
	.gallery-item:hover img {
		transform: scale(1.05);
	}
}

@media (max-width: 576px) {
	.gallery-grid {
		gap: 8px;
	}
}