/**
 * ----------------------------------------------------------------------------
 * Frontend CSS
 * ----------------------------------------------------------------------------
 */

/* Form */

	#vehicle-filter {
		display: flex;
		flex-wrap: wrap;
		gap: 1em;
		margin-bottom: 1.5em;
	}

	.vehicle-filter-form-element {
		margin: 0;
		padding: 0;
	}

/* Dual Range Slider */

	.dual-range-slider {
		min-width: 300px;
	}

	.dual-range-slider-output {
		display: flex;
		margin-bottom: .5rem;
	} .dual-range-slider-output > *:last-child {
		margin-left: auto;
	}

	.dual-range-slider-track {
		position: relative;
		flex: 1;
		height: 6px;
		border-radius: 3px;
		background-color: rgba(0,0,0,.1);
	}

	.dual-range-slider-track input[type="range"] {
		position: absolute;
		width: 100%;
		height: 6px;
		background: none;
		pointer-events: none;
		-webkit-appearance: none;
		appearance: none;
		top: 0;
		left: 0;
		margin: 0;
	} .dual-range-slider-track input[type="range"]::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		width: 18px;
		height: 18px;
		border-radius: 50%;
		background: #000;
		cursor: pointer;
		pointer-events: all;
	} .dual-range-slider-track input[type="range"]::-moz-range-thumb {
		width: 18px;
		height: 18px;
		border-radius: 50%;
		background: #000;
		cursor: pointer;
		pointer-events: all;
		border: none;
	}

/* Vehicle Archive */

	.vehicle-archive-grid > *, .vehicle-archive-grid .vehicle-content-container {
		margin-bottom: 1em;
	} .vehicle-archive-grid .vehicle-content-container {
		transition: all .3s;
	} .vehicle-archive-grid .vehicle-content-container:hover {
		box-shadow: rgba(0,0,0,.15) 0 1px 0,rgba(0,0,0,.15) 0 4px 16px,rgba(0,0,0,.15) 0 20px 40px;
	}

	.vehicle-archive-grid > * > a.overlay-link {
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0;
		z-index: 1;
	}

	.vehicle-archive-grid figure figcaption {
		display: none;
	} .vehicle-archive-grid figure img {
		max-width: 100%;
		border-radius: 1rem;
	}

/* Skeleton */

	#skeleton-container {
		display: none;
	}

	.skeleton figure:empty, .skeleton h2:empty, .skeleton h3:empty, .skeleton p:empty {
		width: 100%;
		height: 50px;
		margin-bottom: 1rem;

		position: relative;
		animation-duration: 5s;
		animation-fill-mode: forwards;
		animation-iteration-count: infinite;
		animation-name: skeletonScreenAnimation;
		animation-timing-function: linear;
		background-color: #f6f7f8;
		background: linear-gradient(to right, #eee 8%, #ccc 18%, #eee 33%);
		background-size: 100vw 50px;
	} .skeleton figure:empty {
		height: 250px;
	} .skeleton p:empty {
		height: 25px;
	}

	@keyframes skeletonScreenAnimation {
		0% {
			background-position: -100vw 0
		} 100% {
			background-position: 100vw 0
		}
	}

@media only screen and (min-width: 1024px) {

	/* Vehicle Archive */

	/* .vehicle-archive-grid {
		display: grid;
		grid-template-columns: repeat(2, 49.5%);
		column-gap: 1%;
		row-gap: 1rem;
	} */

	.vehicle-archive-grid .vehicle-content-container {
		padding: 2rem;
		display: flex;
		align-items: center;
	} .vehicle-archive-grid figure {
		flex: 0 0 40%;
		margin: 0 1.5em 0 0;
	}
}