// Core variables and mixins
@import 'bs-variables';
@import 'mixins';

#brands_a_z {
    &::after {
        content: "";
        display: table;
        clear: both;
    }

    ul {
        list-style: none;
        margin: 0;
    }

    .brands_index {
        display: flex;
        flex-wrap: wrap;

        li {
            text-transform: uppercase;
            margin: 0 2.74px;

            span,a {
                padding: 2px 10px;
                //border: 1px solid #c7c7c7;
                font-size: 20px;
            }

            span {
                border: 1px solid #cdcdcd;
                color: #cdcdcd;
            }

            &.active a {
                border: 1px solid #414141;
                color: #414141;

                &:hover {
                    background-color: #414141;
                    color: #fff;
                }
            }
        }
    }

    #brands-t {
        text-transform: uppercase;
        font-weight: bold;
    }

    .brands {
        a {
            color: #313030;
        }
    }

    .top {
        margin: 24px 0;
        display: block;
        float: right;
        padding: 4px 16px;
        background-color: #414141;
        color: #fff;

        &:hover {
            background-color: #000;
        }
    }
}

.brand-thumbnails {
    .thumbnail > a {
        display: block;
    }

    .brand-thumbnail {
        max-width: 100%;
        height: auto;
    }
}

@media (min-width:550px) {
	.brand-thumbnails {
		@include make-row();

		.thumbnail {
			@include make-col-ready();
		}
	}
}

@include media-breakpoint-up(xl) {

	.brand-thumbnails.columns-1 {
		.thumbnail {
			@include make-col(12);
		}
	}

	.brand-thumbnails.columns-2 {
		.thumbnail {
			@include make-col(6);
		}
	}

	.brand-thumbnails.columns-3 {
		.thumbnail {
			@include make-col(4);
		}
	}

	.brand-thumbnails.columns-4 {
		.thumbnail {
			@include make-col(3);
		}
	}

	.brand-thumbnails.columns-5 {
		.thumbnail {
			@include make-col(2.4);
		}
	}

	.brand-thumbnails.columns-6 {
		.thumbnail {
			@include make-col(2);
		}
	}

	.brand-thumbnails.columns-7 {
		.thumbnail {
			@include make-col(1.71428571429);
		}
	}

	.brand-thumbnails.columns-8 {
		.thumbnail {
			@include make-col(1.5);
		}
	}
}