.tt-fbrand { display: inline-flex; align-items: center; gap: 10px; color: #ffffff; text-decoration: none; }
.tt-fbrand__img { display: block; width: auto; max-width: 220px; object-fit: contain; border-radius: 10px; }
.tt-fbrand__name { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.tt-fbrand--sized .tt-fbrand__img { height: var(--tt-fbrand-h, auto); width: var(--tt-fbrand-w, auto); }
.tt-fbrand--pct { width: 100%; }
.tt-fbrand--pct .tt-fbrand__img { max-width: 100%; }
/* Percent width is the large logo: it takes the colour around it, and a store without a logo shows its name big. */
.tt-fbrand--pct { color: inherit; }
.tt-fbrand--pct .tt-fbrand__name { font-size: clamp(40px, 10vw, 160px); line-height: 1; }
@media (max-width: 749px) {
  .tt-fbrand--sized .tt-fbrand__img { height: var(--tt-fbrand-hm, var(--tt-fbrand-h, auto)); width: var(--tt-fbrand-wm, var(--tt-fbrand-w, auto)); }
  .tt-fbrand--pct-m { width: 100%; }
  .tt-fbrand--pct-m .tt-fbrand__img { max-width: 100%; }
}