@import "variables";
.w-brands {
	& + .w-brands {
		margin-top: 48px;
	}

	.w-brands__head {
		position: relative;
		margin-bottom: 16px;
		&.h1 {
			font-size: 24px;
			font-weight: bold;
			color: $blue;
		}
		&.h2 {
			padding-left: 36px;
			font-size: 24px;
			font-weight: bold;
			color: #333;
			.icon {
				position: absolute; top: 2px; left: 0;
				display: block;
				width: 28px;
				height: 28px;
			}
			@media(max-width: 575px){
				padding-left: 52px;
				.icon {
					top: -3px;
					width: 36px;
					height: 36px;
				}
			}
		}
	}
	.w-brands__list {
		margin: 0;
		padding: 0;
		list-style: none;
		@media(min-width: 576px){
			column-count: 2;
			& > li {
				padding-bottom: 20px;
			}
		}
		@media(min-width: 768px){
			column-count: 3;
		}
		@media(max-width: 575px){
			& > li {
				&:not(:first-child){
					border-top: 1px solid #f2f2f2;
				}
			}
		}
	}
	.w-brands__link {
		border: 0;
		position: relative;
		max-width: 100%;
		display: inline-block;
		padding-left: 36px;
		font-size: 18px;
		line-height: 20px;
		color: #0d0d0d;
		text-decoration: none;
		.link__icon {
			position: absolute; top: -2px; left: 0;
			display: block;
			width: 24px;
			height: 24px;
			img {
				position: absolute; top: 50%; left: 50%;
				display: block;
				max-width: 100%;
				max-height: 100%;
				@include transform(translateX(-50%) translateY(-50%));
			}
		}
		.link__text {
			position: relative;
			overflow: hidden;
			display: block;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		&:hover {
			color: $blue;
		}
		@media(max-width: 575px){
			display: block;
			padding: 16px 0 16px 52px;
			font-size: 20px;
			font-weight: bold;
			line-height: 24px;
			.link__icon {
				top: 8px;
				width: 36px;
				height: 36px;
			}
		}
		&.more {
			//font-size: 16px;
			//font-weight: 500;
			color: $blue;
			fill: $blue;
		}
	}
	.w-brands__footer {
		.footer-link {
			color: #7E93B2;
			&:hover {
				color: $blue;
				cursor: pointer;
			}
		}
		@media(max-width: 575px){
			padding-top: 4px;
			font-size: 16px;
		}
	}

	&:not(.in){
		.footer-link_b {
			display: none;
		}
	}
	&.in {
		.w-brands__link {
			&.more {
				display: none;
			}
		}
		.w-brands__list {
			& > li {
				&.hidden {
					display: block !important;
				}
			}
		}
		.footer-link_a {
			display: none;
		}
	}
}