/* The Brands tile uses a generated empty backdrop and the unchanged supplier bike. */
[data-biceco-brand-tile] .brands__picture-wrap {
  position: relative;
  isolation: isolate;
  height: 0;
  /* Match the adjacent Brooks banner's native 1296 x 734 proportions. */
  padding-bottom: 56.6358024691%;
  overflow: hidden;
  background:
    radial-gradient(ellipse 11% 3% at 30% 96%, rgba(5, 8, 5, .6), transparent 72%),
    radial-gradient(ellipse 11% 3% at 73% 96%, rgba(5, 8, 5, .6), transparent 72%),
    #282c24 url("assets/brand-tile-cinematic.webp") center / cover no-repeat;
}
[data-biceco-brand-tile] .brands__picture-wrap::before {
  z-index: 2;
  background: linear-gradient(180deg, rgba(14, 20, 16, .12), rgba(14, 20, 16, .04) 42%, rgba(14, 20, 16, .38));
}
[data-biceco-brand-tile] .brands__picture,
[data-biceco-brand-tile] .brands__picture-wrap::after {
  position: absolute;
  z-index: 1;
  left: 6%;
  top: -3%;
  width: 88%;
  height: 108% !important;
  clip-path: inset(4% 5% 3% 3%);
}
[data-biceco-brand-tile] .brands__picture {
  object-fit: contain;
  object-position: center;
  filter: brightness(.88) saturate(.64) sepia(.22) contrast(1.02) drop-shadow(2px 5px 3px rgba(12, 16, 12, .4));
}
@supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
  [data-biceco-brand-tile] .brands__picture-wrap::after {
    content: "";
    pointer-events: none;
    background: linear-gradient(105deg, rgba(242, 176, 92, .45), rgba(206, 157, 88, .2) 35%, rgba(42, 43, 29, .12) 60%, rgba(6, 14, 14, .36));
    -webkit-mask: url("assets/roam-green.webp") center / contain no-repeat;
    mask: url("assets/roam-green.webp") center / contain no-repeat;
    mix-blend-mode: soft-light;
  }
}
[data-biceco-brand-tile] .brands__info-wrap { z-index: 3; }
[data-biceco-brand-tile] .brands__logo-wrap {
  position: absolute;
  top: 20%;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}
[data-biceco-brand-tile] .brands__logo {
  display: block;
  width: 54%;
  max-width: 380px;
  height: auto;
  margin: 0;
  transform: none;
}
[data-biceco-brand-tile] .brands__text-wrap {
  position: absolute;
  bottom: 27%;
  left: 50%;
  width: 85%;
  max-width: 280px;
  padding-top: 0;
  transform: translateX(-50%);
}
[data-biceco-brand-tile] .brands__text { font-size: clamp(12px, 1.1vw, 16px); line-height: 1.4; }
[data-biceco-brand-tile] .brands__link-wrap {
  position: absolute;
  left: 0;
  bottom: 4%;
  width: 100%;
}
[data-biceco-brand-tile]:focus-visible { outline: 3px solid #203a2d; outline-offset: 3px; }
@media (max-width: 670px) {
  [data-biceco-brand-tile] .brands__logo { width: 56%; max-width: 310px; }
  [data-biceco-brand-tile] .brands__text-wrap { bottom: 23%; }
  [data-biceco-brand-tile] .brands__text { font-size: 13px; }
}