.dd-gallery-grid .dd-gallery-card {
	position: relative;
	isolation: isolate;
	justify-content: flex-end;
	color: var(--text, #fbfcff);
	text-decoration: none;
	background-position: center;
	background-size: cover;
	filter: saturate(0.38);
	transition: border-color 180ms ease, filter 180ms ease, transform 180ms ease;
	background-image:
		var(--dd-gallery-image, linear-gradient(135deg, rgba(46, 166, 223, 0.72), rgba(100, 191, 75, 0.42) 34%, rgba(255, 163, 19, 0.58) 66%, rgba(181, 27, 132, 0.62)));
}

.dd-gallery-grid .dd-gallery-card > * {
	transition: opacity 180ms ease, transform 180ms ease;
}

.dd-gallery-grid .dd-gallery-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(var(--dd-gallery-overlay-rgb, 8, 9, 11), 0.08), rgba(var(--dd-gallery-overlay-rgb, 8, 9, 11), var(--dd-gallery-overlay-opacity, 0.72)));
	opacity: 1;
	transition: opacity 180ms ease;
}

.dd-gallery-grid .dd-gallery-card:hover,
.dd-gallery-grid .dd-gallery-card:focus,
.dd-gallery-grid .dd-gallery-card:focus-visible,
.dd-gallery-grid .dd-gallery-card:active {
	border-color: rgba(255, 255, 255, 0.62);
	filter: saturate(1);
	transform: translateY(-2px);
}

.dd-gallery-grid .dd-gallery-card:hover::before,
.dd-gallery-grid .dd-gallery-card:focus::before,
.dd-gallery-grid .dd-gallery-card:focus-visible::before,
.dd-gallery-grid .dd-gallery-card:active::before,
.dd-gallery-grid .dd-gallery-card.is-overlay-off::before {
	opacity: 0;
}

.dd-gallery-grid .dd-gallery-card:hover > *,
.dd-gallery-grid .dd-gallery-card:focus > *,
.dd-gallery-grid .dd-gallery-card:focus-visible > *,
.dd-gallery-grid .dd-gallery-card:active > * {
	opacity: 0;
	transform: translateY(8px);
}

.dd-gallery-grid .dd-gallery-tag {
	width: fit-content;
	border-color: rgba(255, 255, 255, 0.74);
	color: #fff;
	background: rgba(8, 9, 11, 0.34);
	backdrop-filter: blur(6px);
}

.dd-gallery-grid a.dd-gallery-card:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}