/* Brand thumbnail cards for [product_brand_thumbnails]. */

ul.brand-thumbnails {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	clear: both;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.brand-thumbnails.columns-1 {
	grid-template-columns: minmax(0, 1fr);
}

ul.brand-thumbnails.columns-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

ul.brand-thumbnails.columns-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

ul.brand-thumbnails.columns-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

ul.brand-thumbnails.columns-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

ul.brand-thumbnails.columns-6 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

ul.brand-thumbnails.fluid-columns {
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

ul.brand-thumbnails::before,
ul.brand-thumbnails::after {
	content: none;
	display: none;
}

ul.brand-thumbnails li,
ul.brand-thumbnails:not(.fluid-columns) li,
ul.brand-thumbnails.fluid-columns li {
	float: none !important;
	clear: none !important;
	width: auto !important;
	min-width: 0;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.05);
}

ul.brand-thumbnails li a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	min-height: 280px;
	padding: 32px 20px 24px;
	color: #111827;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

ul.brand-thumbnails li a:hover,
ul.brand-thumbnails li a:focus {
	color: #111827;
	text-decoration: none;
}

ul.brand-thumbnails li:hover {
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

ul.brand-thumbnails li a:focus-visible {
	outline: 2px solid #003786;
	outline-offset: -2px;
	border-radius: 12px;
}

ul.brand-thumbnails .brand-thumbnail__logo {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	height: 150px;
}

ul.brand-thumbnails li img.brand-thumbnail {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	object-fit: contain;
	object-position: center;
}

ul.brand-thumbnails li .brand-thumbnail__logo.is-placeholder img.brand-thumbnail {
	max-width: 96px;
	max-height: 96px;
}

ul.brand-thumbnails .brand-thumbnail__label {
	display: block;
	margin-top: 20px;
	color: #111827;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
}

@media screen and (max-width: 768px) {
	.kt-inside-inner-col:has(> ul.brand-thumbnails) {
		min-width: 0;
		max-width: 100%;
	}

	ul.brand-thumbnails.columns-3,
	ul.brand-thumbnails.columns-4,
	ul.brand-thumbnails.columns-5,
	ul.brand-thumbnails.columns-6 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		min-width: 0;
		width: 100%;
		max-width: 100%;
	}

	ul.brand-thumbnails {
		gap: 12px;
	}

	ul.brand-thumbnails li a {
		min-height: 200px;
		padding: 20px 12px 16px;
	}

	ul.brand-thumbnails .brand-thumbnail__logo {
		height: 110px;
	}

	ul.brand-thumbnails li img.brand-thumbnail {
		max-width: 100%;
		max-height: 100%;
	}

	ul.brand-thumbnails li .brand-thumbnail__logo.is-placeholder img.brand-thumbnail {
		max-width: 72px;
		max-height: 72px;
	}
}