/* SD brand tiles — two up, four across at desktop, matching the reference's
   image-box-large: 49.5% with a 1% gutter, narrowing to 24.25% at 1200px. */
/*
 * Measured: four 328.2px tiles with a 13.6px gap across the full band. The
 * reference's block is 382.1px against a 368.6px tile, so it carries 13.5px
 * below the row.
 */
.sd-brandtiles {
  display: grid; gap: 13.6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-bottom: 13.5px;
}
@media (min-width: 1200px) { .sd-brandtiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.sd-brandtile { position: relative; display: block; background: #f0f0f0; color: #4c4d4f; }
.sd-brandtile:hover { text-decoration: none; }
/* Measured on the reference: the tile media is 328 x 364 — portrait, not
   landscape — and nothing moves on hover. */
.sd-brandtile__media { display: block; aspect-ratio: 328.2 / 368.6; overflow: hidden; }
.sd-brandtile__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-brandtile__label {
  position: absolute; bottom: 15px; left: 15px;
  padding: 0 15px; height: 30px; line-height: 30px;
  background: #fff; border-radius: 3px;
  font-size: 12px; color: #4c4d4f;
}