/* Car card image box.
 *
 * Plain hand-written CSS, NOT generated by Tailwind: the toolchain cannot be run here
 * (no node/npm on the server, and assets/styles/app.css imports a file from the
 * AssetMapper-generated assets/vendor/ which is not in git). Do not add @tailwind
 * directives to this file.
 *
 * Loaded AFTER build/app.css in base.html.twig, otherwise Tailwind's utilities win.
 *
 * 420x280 is exactly 3:2 - the ratio of the thumb_large_* filters - so object-cover
 * scales the thumbnail and never crops it a second time. Keep the two in sync.
 */
.car-card-media {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2;
	flex-shrink: 0;
	overflow: hidden;
	background-color: #f3f4f6;
}

@media (min-width: 768px) {
	.car-card-media {
		width: 420px;
		height: 280px;
		aspect-ratio: auto;
	}
}