@import "variables";
.w-related-parts {
	background: $color_gray_05;
	padding: 24px;
	font-size: 13px;
	@media (max-width: 767px){
		padding: 12px;
	}
}

.w-related-parts__head {
	margin-bottom: 24px;
	.title {
		strong {
			margin-right: 4px;
			font-size: 22px;
			@media (max-width: 767px){
				font-size: 18px;
			}
		}
		a {
			border-bottom-color: transparent;
			color: $gray;
			white-space: nowrap;
			&:hover {
				color: $blue;
			}
		}
	}
	.description {
		font-weight: bold;
		color: $gray;
		@media(max-width: 767px){
			padding-top: 8px;
		}
	}
}
.w-related-parts__body {
	position: relative;
	margin: 0 -8px;
}

.w-related-parts-tile {
	display: inline-block;
	vertical-align: top;
	width: 16.6666%;
	padding: 12px 8px;
	@media (max-width: 1199px){
		width: 20%;
	}
	@media (max-width: 991px){
		width: 25%;
	}
	@media (max-width: 767px){
		width: 33.3333%;
	}
	@media (max-width: 575px){
		width: 50%;
	}
	.item {
		border: 0;
		position: relative;
		display: block;
		color: $color_dark;
		.img-aligner {
			background-color: $white;
			border: 1px solid $color_gray_10;
		}
		.txt {
			padding: 8px;
			font-weight: bold;
			line-height: 16px;
			text-align: center;
			@media (max-width: 575px){
				font-size: 12px;
			}
		}
		&.active {
			background: $blue;
			color: $white;
			.img-aligner {
				border: none;
			}
			.txt {
				font-weight: normal;
			}
		}
		&:not(.active):hover {
			color: $blue;
			.img-aligner {
				@include box-shadow(0 0 16px rgba(0,0,0,0.2));
			}
		}
	}
}