.sdash-bento-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--md);
}

.sdash-portfolio-card {
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md);
}

.sdash-portfolio-card--wide {
	grid-column: span 2;
}

.sdash-portfolio-card__image {
	aspect-ratio: 4 / 3;
	background-color: var(--wp--preset--color--neutral);
	background-size: cover;
	background-position: center;
}

.sdash-portfolio-card__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--wp--preset--spacing--sm);
	background: linear-gradient(to top, rgba(23, 21, 18, 0.85), transparent 65%);
	opacity: 0;
	transition: opacity 200ms ease;
}

.sdash-portfolio-card__overlay * {
	color: var(--wp--preset--color--background) !important;
	margin: 0;
}

.sdash-portfolio-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.sdash-portfolio-card:hover .sdash-portfolio-card__overlay,
.sdash-portfolio-card:focus-within .sdash-portfolio-card__overlay {
	opacity: 1;
}

/* Touch-Geräte ohne Hover: Infos permanent unterhalb des Bildes */
@media ( hover: none ) {
	.sdash-portfolio-card__overlay {
		position: static;
		background: none;
		opacity: 1;
		padding: var(--wp--preset--spacing--xs) 0 0;
	}

	.sdash-portfolio-card__overlay * {
		color: var(--wp--preset--color--primary) !important;
	}
}

@media ( max-width: 781px ) {
	.sdash-bento-grid {
		grid-template-columns: 1fr;
	}

	.sdash-portfolio-card--wide {
		grid-column: span 1;
	}
}