/* Keep every banner cell at the same 600:100 ratio, before and after images load. */
.banner-grid {grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.banner-grid > a {
  display:block;
  position:relative;
  width:100%;
  min-width:0;
  height:auto;
  aspect-ratio:6 / 1;
  overflow:hidden;
  border:1px solid #ddd;
  border-radius:7px;
  background:#f3f8ff;
}
.banner-grid > a > img {
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:100%;
  object-fit:contain;
  border:0;
  border-radius:0;
}
.banner-grid > a.banner-loading {
  background:linear-gradient(105deg,#e7f1fc 10%,#bcd9f5 45%,#e7f1fc 80%);
  background-size:200% 100%;
  animation:banner-loading 1.8s ease-in-out infinite;
}
.banner-grid > a.banner-loading > img {visibility:hidden}
.banner-grid > a.banner-loading.banner-ready {background:#fff;animation:none}
.banner-grid > a.banner-loading.banner-ready > img {visibility:visible}
@keyframes banner-loading {to {background-position:-200% 0}}
@media (prefers-reduced-motion:reduce) {
  .banner-grid > a.banner-loading {animation:none}
}
/* On phones, use the full viewport width and a taller two-column banner row. */
@media (max-width:767px) {
  main.shell > .partners,
  main.shell > .category-partners {
    width:calc(100% + 24px);
    margin-inline:-12px;
  }
  main.shell > .partners > h1,
  main.shell > .category-partners > h2 {margin-inline:12px}
  main.shell > .partners > .banner-grid,
  main.shell > .category-partners > .banner-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:4px!important;
  }
  main.shell > .partners > .banner-grid > a,
  main.shell > .category-partners > .banner-grid > a {
    aspect-ratio:11 / 2;
    border-radius:2px;
  }
  main.shell > .partners > .banner-grid > a > img,
  main.shell > .category-partners > .banner-grid > a > img {object-fit:fill}
}