.logo-tiles {
	max-width: 1200px;
	margin: 0 auto 48px;
	padding: 0 16px;
}
.logo-tiles .lt-heading {
	margin: 0 0 24px;
}
.lt-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	grid-auto-rows: minmax(150px, auto);
	grid-auto-flow: dense;
	overflow: hidden;
}
.lt-grid.has-lines {
	gap: 1px;
	background: #d6d9de;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
.lt-grid.has-lines:has(.bg-ut-gray) { background: #a9adb1; }
.lt-grid:has(.is-big) { grid-template-columns: repeat(4, 1fr); }
/* without a big tile, flex lets a short last row stretch instead of leaving holes */
.lt-grid:not(:has(.is-big)) { display: flex; flex-wrap: wrap; }
.lt-grid:not(:has(.is-big)) .lt-tile { flex: 1 1 200px; min-height: 150px; }
.lt-grid:not(:has(.is-big)) .lt-tile.is-wide { flex-basis: 400px; }
.lt-grid.is-solo .lt-tile { min-height: 220px; }
.lt-grid.is-solo { grid-template-columns: 1fr; grid-auto-rows: minmax(220px, auto); }

.lt-tile {
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 28px 22px;
	text-decoration: none;
	color: inherit;
}
a.lt-tile:hover,
a.lt-tile:focus { text-decoration: none; filter: brightness(.97); }
.lt-tile.is-wide { grid-column: span 2; }
.lt-tile.is-big { grid-column: span 2; grid-row: span 2; padding: 40px; }

.lt-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}
.lt-logo img {
	max-width: min(220px, 100%);
	max-height: 90px;
	width: auto;
	height: auto;
	object-fit: contain;
}
.is-wide .lt-logo img { max-width: min(320px, 100%); max-height: 110px; }
.is-big .lt-logo img,
.is-solo .lt-logo img { max-width: min(420px, 100%); max-height: 180px; }

.logo-md .lt-logo img { max-width: min(260px, 100%); max-height: 120px; }
.logo-lg .lt-logo img { max-width: min(300px, 100%); max-height: 150px; }
.logo-xl .lt-logo img { max-width: min(360px, 100%); max-height: 200px; }

.lt-label {
	position: absolute;
	top: 12px;
	left: 14px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--accent-color, #003058);
}
.lt-caption {
	font-size: 16px;
	line-height: 1.4;
	/* two lines reserved so a wrapping caption does not push its logo out of line */
	min-height: 2.8em;
	text-align: center;
	color: var(--accent-color, #003058);
}
.lt-caption a { color: var(--cta-color, #ba1c21); }
.bg-blue .lt-caption a, .bg-red .lt-caption a { color: #fff; text-decoration: underline; }

.bg-transparent { background: transparent; }
.has-lines .bg-transparent,
.bg-white { background: #fff; }
.bg-light-gray { background: #f1f2f4; }
.bg-ut-gray { background: #c2c5c7; }
.bg-blue { background: var(--accent-color, #003058); }
.bg-red { background: var(--cta-color, #ba1c21); }
.bg-blue .lt-label, .bg-blue .lt-caption,
.bg-red .lt-label, .bg-red .lt-caption { color: #fff; }

@media (max-width: 520px) {
	.lt-grid,
	.lt-grid:has(.is-big) { grid-template-columns: 1fr 1fr; }
	.lt-tile { padding: 18px 12px; }
	.lt-tile.is-big { padding: 24px; }
	.lt-grid:not(:has(.is-big)) .lt-tile { flex-basis: 140px; min-height: 120px; }
	.lt-tile.is-big, .lt-tile.is-wide, .is-solo .lt-tile { grid-column: 1 / -1; grid-row: auto; }
}