/* "Attrazioni nei dintorni" — nearby stadiums, title and distance over the photo.
   Ported from the old theme's .dintorni block. Below 641px the card turns into a
   horizontal row with the caption beside the picture instead of on top of it. */

.nearby-places h2 { margin-top: 30px; }

.nearby-places ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.nearby-places ul li { display: block; width: 100%; margin: 7px 0; padding: 0; box-shadow: 0 0 1px rgba(0, 0, 0, 0.11), 0 1px 2px rgba(0, 0, 0, 0.22); transition: box-shadow 0.2s; }
.nearby-places ul li:before { display: none; }
.nearby-places ul li:hover { box-shadow: 0 0 3px rgba(0, 0, 0, 0.13), 0 3px 6px rgba(0, 0, 0, 0.26); }

.nearby-places a { display: flex; align-items: center; text-decoration: none; }

.nearby-places-picture { display: block; overflow: hidden; width: 40%; min-height: 60px; background-color: #eeeeee; }
.nearby-places-picture img { display: block; width: auto; max-height: 100px; transform: translateX(-15%); }

.nearby-places-caption { display: block; box-sizing: border-box; width: 60%; padding: 10px 15px; }
.nearby-places-title { display: block; color: #000000; font-size: 16px; font-weight: 600; line-height: 1; }
.nearby-places-distance { display: block; margin-top: 3px; color: #000000; font-size: 13px; line-height: 1; }

@media (min-width: 641px) {
	.nearby-places ul { flex-wrap: nowrap; }
	.nearby-places ul li { flex: 1 1 1%; width: auto; margin: 0 15px 0 0; background-color: #cccccc; }
	.nearby-places ul li:nth-of-type(3n) { margin-right: 0; }

	.nearby-places a { position: relative; display: block; }

	.nearby-places-picture { width: auto; max-height: 125px; min-height: 0; background-color: transparent; }
	.nearby-places-picture img { width: 100%; max-height: 126px; transform: none; transition: transform 0.4s, opacity 0.4s; }
	.nearby-places ul li:hover .nearby-places-picture img { transform: scale(1.3); opacity: 0.7; }

	/* The caption covers the whole photo; the gradient only bites near the bottom. */
	.nearby-places-caption { position: absolute; top: 1px; left: 0; width: 100%; height: 100%; padding: 0; color: #ffffff; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.8) 100%); }
	.nearby-places-title { position: absolute; right: 10px; bottom: 25px; left: 10px; color: #ffffff; font-size: 19px; text-shadow: 0 1px 1px #000000; }
	.nearby-places-distance { position: absolute; bottom: 10px; left: 10px; margin-top: 0; color: #ffffff; }
}