/**
 * Gallery Grid Component Styles
 * Mobile-First
 *
 * @package Standfast
 * @since 1.0.0
 */

.gallery-grid {
	padding: var(--spacing-sm) 0;
}

.gallery-grid__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-md);
}

.gallery-grid__item {
	position: relative;
	width: 100%;
	padding-top: 75%; /* 4:3 aspect ratio */
	overflow: hidden;
	border-radius: 8px;
	background-color: #f3f4f6;
}

.gallery-grid__link {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.gallery-grid__image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.gallery-grid__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(44, 40, 41, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.gallery-grid__link:hover .gallery-grid__overlay,
.gallery-grid__link:focus .gallery-grid__overlay {
	opacity: 1;
}

.gallery-grid__link:hover .gallery-grid__image,
.gallery-grid__link:focus .gallery-grid__image {
	transform: scale(1.05);
}

.gallery-grid__icon {
	font-size: 32px;
	color: var(--white);
}

.gallery-grid--2-cols .gallery-grid__inner {
	grid-template-columns: 1fr;
}

.gallery-grid--3-cols .gallery-grid__inner {
	grid-template-columns: 1fr;
}

.gallery-grid--4-cols .gallery-grid__inner {
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.gallery-grid {
		padding: var(--spacing-md) 0;
	}

	.gallery-grid__inner {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--spacing-lg);
	}

	.gallery-grid--3-cols .gallery-grid__inner {
		grid-template-columns: repeat(2, 1fr);
	}

	.gallery-grid--4-cols .gallery-grid__inner {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.gallery-grid__inner {
		grid-template-columns: repeat(3, 1fr);
	}

	.gallery-grid--2-cols .gallery-grid__inner {
		grid-template-columns: repeat(2, 1fr);
	}

	.gallery-grid--3-cols .gallery-grid__inner {
		grid-template-columns: repeat(3, 1fr);
	}

	.gallery-grid--4-cols .gallery-grid__inner {
		grid-template-columns: repeat(4, 1fr);
	}
}