.viva-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

.viva-gallery-item {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border-radius: var(--viva-radius-md);
	background: var(--viva-color-surface-2);
}

.viva-gallery-item--portrait {
	aspect-ratio: 4 / 5;
}

.viva-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--viva-duration-slow) var(--viva-ease);
}

.viva-gallery-item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(0 0 0 / 0.32), transparent 50%);
	opacity: 0;
	transition: opacity var(--viva-duration-base) ease;
}

.viva-gallery-item:hover img {
	transform: scale(1.035);
}

.viva-gallery-item:hover::after {
	opacity: 1;
}