/**
 * Gallery page widgets (stitch _7).
 */

.obc-gallery-wrap {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--margin-mobile);
}

@media (min-width: 768px) {
	.obc-gallery-wrap {
		padding-inline: var(--margin-desktop);
	}
}

.obc-gallery-masonry {
	padding-bottom: var(--space-2xl);
}

.masonry-grid {
	column-count: 1;
	column-gap: var(--gutter);
}

.masonry-item {
	break-inside: avoid;
	margin-bottom: var(--gutter);
}

@media (min-width: 768px) {
	.masonry-grid {
		column-count: 2;
	}
}

@media (min-width: 1024px) {
	.masonry-grid {
		column-count: 3;
	}
}

.gallery-item-overlay {
	background-image: linear-gradient(
		to top,
		color-mix(in srgb, var(--color-on-background) 90%, transparent),
		color-mix(in srgb, var(--color-on-background) 20%, transparent),
		transparent
	);
}

.group:hover .group-hover\:opacity-100 {
	opacity: 1;
}

.group:hover .group-hover\:rotate-180 {
	transform: rotate(180deg);
}

.mr-auto {
	margin-right: auto;
}

@media (min-width: 1024px) {
	.lg\:flex {
		display: flex;
	}
}

.hover\:opacity-90:hover {
	opacity: 0.9;
}

.hover\:bg-primary:hover {
	background-color: var(--color-primary);
}

.hover\:text-white:hover {
	color: #ffffff;
}

.text-\[32px\] {
	font-size: 32px;
}

.z-\[100\] {
	z-index: 100;
}

.z-\[110\] {
	z-index: 110;
}