/**
 * The specification card in the single-car page's right-hand column.
 */

@layer components {
	.hauto-car-specs {
		padding: var(--wp--preset--spacing--50);
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--hauto-radius-md);
		background-color: var(--wp--preset--color--base);
	}

	.hauto-car-specs__title {
		margin: 0;
		font-size: var(--wp--preset--font-size--large);
	}

	/* Two columns of facts down to a card about 17rem wide, which keeps two on
	   an ordinary phone; a long label wraps inside its column. */
	.hauto-car-specs__list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
		gap: var(--wp--preset--spacing--40);
		margin-block: var(--wp--preset--spacing--40) 0;
	}

	.hauto-car-specs__label {
		display: flex;
		gap: var(--wp--preset--spacing--10);
		align-items: center;
		color: var(--wp--preset--color--muted);
		font-size: var(--wp--preset--font-size--x-small);
		text-transform: uppercase;
	}

	.hauto-car-specs__value {
		margin: var(--wp--preset--spacing--10) 0 0;
		font-weight: 600;
		overflow-wrap: anywhere;
	}
}