.acknowledgement-cards {
	display: flex;
	flex-flow: row wrap;
	--gutter-x: 30px;
	--gutter-y: 30px;
	margin: calc( var( --gutter-y ) * -1 ) calc( var( --gutter-x ) * -.5 ) 0;
}

.ack-card {
	margin: var( --gutter-y ) 0 0;
	padding: 0 calc( var( --gutter-x ) * .5 );
	flex: 0 0 auto;
	width: 100%;
	font-weight: bold;
}

.ack-card img {
	width: 100%;
	height: auto;
	display: block;
}

@media ( min-width: 768px ) {
	.ack-card {
		width: 50%;
	}
}

.ack-card .msg {
	font-weight: 600;
	font-style: italic;
	margin-top: .25em;
}
.ack-card .msg:before {
	content: '\201c';
}
.ack-card .msg:after {
	content: '\201d';
}
.ack-card .msg:empty {
	display: none !important;
}

@media not all and (hover: none) {
	.ack-card .img-wrap {
		position: relative;
		overflow: clip;
	}
	.ack-card .msg {
		font-weight: normal;
		margin-top: 0;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: auto;
		max-height: 100%;
		overflow: auto;
		padding: 1em;
		background-color: rgba( 0, 0, 0, .65 );
		color: white;
		translate: 0 100%;
		transition: .3s ease;
		opacity: 0;
	}
	.ack-card .img-wrap:hover .msg {
		translate: 0 0;
		opacity: 1;
	}
}

@media (prefers-reduced-motion) {
	.ack-card .msg {
		transition: none;
	}
}