.card {
	border-radius: 16px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
	width: 100%;
	cursor: pointer;
	margin-bottom: 16px;
	padding: 1px 0px 2px 0px;
	background-color: #F3F4EF;
}
.card img {
	border-radius: 13px;
	transform: scale(0.975);
	--card-transform: 0px;
	transition: .3s transform cubic-bezier(1, -.25, 0, 1.3), .25s border-radius ease-in;
}
.card-img-container {
	border-radius: 16px;
	--img-aspect-ratio: 0.66442953;
	--img-width: calc(0.975 * calc(100vw - 32px));
	min-height: calc(var(--img-aspect-ratio) * var(--img-width));
	position: relative;
}
.card img.open {
	border-radius: 0;
	transform: translateY(var(--card-transform)) scale(var(--scale-factor));
	z-index: 4;
}
.card img.openFixed {
	transition: none;
	transform: none;
	position: fixed;
	top: 0;
	left: 0;
}
.card h1 {
	font-size: 26px;
	margin: 0 calc(100% * .025 + 4px);
	max-width: calc(100% - 140px - calc(100% * .025));
	float: left;
	line-height: 44px;
}
.no-location .card h1 {
	max-width: calc(100% - calc(100% * .05 + 8px));
}
.distance-div {
	margin-right: 16px;
	width: 100px;
	text-align: right;
	float: right;
	line-height: 44.8px;
}
.distance-div:before {
	content: '';
	display: inline-block;
	background-image: url(../../images/location_icon.svg);
	vertical-align: middle;
	height: 22px;
	width: 22px;
	margin: -6px 2px 0 0;
}
.card:after {
	content: '';
	display: block;
	clear: both;
}
h1 {
    margin: 6px;
}
#spacer {
    display: block;
    height: 64px;
}