@import "variables";
.car-compatibility {
	font-size: 14px;
	.cc-car {
		background: #EBFFD6;
		display: flex;
		@media(min-width: 768px){
			padding: 8px;
		}
		.cc-car__side {
			@media(max-width: 767px){
				min-height: 72px;
			}
		}
		.cc-car__body {
			flex-grow: 1;
			display: flex;
			flex-wrap: wrap;
			align-content: flex-start;
			padding-left: 12px;
			padding-right: 12px;
			@media(max-width: 767px){
				padding: 6px 12px;
				line-height: 1.25;
			}
		}
		.cc-car__image {
			@media(min-width: 768px){
				width: 72px;
				min-width: 84px;
				min-height: 56px;
			}
			@media(max-width: 767px){
				width: 108px;
				min-width: 108px;
			}
			background-position: 50% 50%;
			background-repeat: no-repeat;
			background-size: cover;
			border: 0;
			position: relative;
			overflow: hidden;
			display: block;
			min-height: 100%;
		}
		.cc-car__description {
			min-width: 100%;
		}
		.cc-car__number {
			margin-right: 8px;
		}
		.cc-car__links {
			@media(max-width: 767px){
				display: flex;
				min-width: 100%;
			}
			a {
				border-bottom-color: transparent;
				&:hover {
					border-bottom-color: $blue;
				}
			}
			.link-all {
				@media(min-width: 768px){
					display: none;
				}
			}
			.link-change {
				@media(max-width: 767px){
					margin-left: auto;
				}
			}
		}
	}
	.cc-info {
		background: #F0E1F3;
		padding: 12px;
		color: #6C208C;
		@media(min-width: 768px){
			padding: 12px 16px 12px 88px;
		}
		.d-flex {
			flex-wrap: wrap;
		}
		.cc-info__name {
			@media(min-width: 768px){
				margin-right: 16px;
			}
			@media(max-width: 767px){
				min-width: 100%;
			}
		}
		.cc-info__vin {
			white-space: nowrap;
			a {
				margin-left: 8px;
			}
		}
		.cc-info__data {
			display: flex;
			flex-wrap: wrap;
			margin: 0 8px 0 0;
			padding: 0;
			list-style: none;
			& > li {
				margin-right: 12px;
			}
		}
		.cc-info__footer {
			display: flex;
			flex-grow: 1;
			@media (max-width: 575px) {
				flex-direction: column;
			}
			.f-col:not(:first-child) {
				@media (min-width: 576px) {
					margin-left: auto;
					padding-left: 12px;
				}
			}
			a {}
			span {
				color: #767676;
			}
		}
	}
}