.thumb_container {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
	width: 150px;
	height: 150px;
	overflow: hidden;
	background-color: #f5f5f5;
}

.thumb_container a {
	display: block;
	width: 100%;
	height: 100%;
}

.thumb_image {
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* Narrow phones: a 150px tile and its 10px gutter need 310px of panel to sit two across, and a
   360px screen leaves about 300px - so every tile had a tile's worth of empty panel beside it.
   They share the row instead */
@media (max-width: 480px) {

	.thumb_container {
		width: calc(50% - 5px);
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.thumb_container:nth-of-type(2n) {
		margin-right: 0px;
	}
}

#vehicle-price-container {
	color: #333;
	font-weight: 600;
}

.vehicle-dealership-map {
	margin-top: 15px;
	border-radius: 4px;
	overflow: hidden;
}

#vehicle-dealership-map-container iframe {
	display: block;
	width: 100%;
}

/* Sticky action bar - the Call / Send us a message buttons from the top of the page follow
   the visitor down in a translucent bar once the inline ones scroll up under the header */
#vehicle-sticky-actions {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1020;
	padding: 8px 0;
	background-color: rgba(255, 255, 255, 0.85);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-100%);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

#vehicle-sticky-actions.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Phones.

   The three actions are btn-lg, and one of them is pulled left of the two the row right-aligns.
   Side by side they are wider than any phone, so what a visitor actually got was a ragged stack at
   three different widths with a stray 5px indent under it - and the same three in the sticky bar,
   which then stood about a third of the screen tall over the page it was following.

   Inline they become one full width button per line. In the sticky bar they stay on one row,
   sharing it equally at a size that fits - a bar that follows the visitor down the page has to
   stay a bar. */

@media (max-width: 767px) {

	#vehicle-action-buttons {
		text-align: left;
	}

	#vehicle-action-buttons .col-xs-12 > a {
		display: block;
	}

	#vehicle-action-buttons .btn {
		display: block;
		width: 100%;
		float: none;
		margin-left: 0px !important;
		margin-bottom: 8px;
	}

	#vehicle-sticky-actions {
		padding: 6px 0;
	}

	#vehicle-sticky-actions .col-xs-12 {
		display: flex;
		align-items: stretch;
		text-align: center;
	}

	#vehicle-sticky-actions .col-xs-12 > a {
		display: flex;
		flex: 1 1 0px;
		min-width: 0px;
		margin-left: 5px;
	}

	#vehicle-sticky-actions .btn {
		flex: 1 1 0px;
		float: none;
		min-width: 0px;
		margin-left: 5px !important;
		padding: 7px 5px;
		font-size: 12px;
		line-height: 1.25;
		white-space: normal;
	}

	#vehicle-sticky-actions .col-xs-12 > :first-child,
	#vehicle-sticky-actions .col-xs-12 > :first-child .btn {
		margin-left: 0px !important;
	}
}

/* Sticker price shown beside a sale price - reads as the price that was, see VehicleInventory::displayPrice() */
#vehicle-price-container .vehicle-price-was {
	color: #999;
	font-size: 17px;
	font-weight: 400;
	margin-right: 4px;
}