:root {
    --logo-list-gap: max(12px, calc(32 * var(--px)));
  }

  .module-brands .module-body {
    margin-left: calc(var(--page-padding-left) * -1);
    margin-right: calc(var(--page-padding-right) * -1);
    overflow: hidden;
  }
  
  .logo-marquee-wrap.row-1 {
    margin-bottom: var(--logo-list-gap);
  }
  
  .logo-list {
    display: flex;
    flex-flow: row nowrap;
  }
  
  .logo-list > li {
    flex-shrink: 0;
    margin-right: var(--logo-list-gap);
  }
  
  .logo-list img,
  .logo-grid img {
    display: block;
    width: max(80px, calc(136 * var(--px)));
    height: auto;
  }
  
  .logo-grid img {
    width: 100%;
  }
  
  .logo-list .a,
  .logo-grid .a {
    display: block;
    --delay: 5ms;
    background: var(--base-color-light-gray);
    transition: var(--ttf-2), var(--ttf-7), var(--ttf-7);
    transition-property: background-color, opacity, transform;
    transition-duration: 500ms, 1.5s, 1.5s;
    transition-delay: 0ms, calc(var(--ios-random, 0) * var(--delay)), calc(var(--ios-random, 0) * var(--delay));
    opacity: 0;
    transform: scale(0.5);
  }
  
  .logo-grid .a {
    --delay: 25ms;
  }
  
  .is-on-screen .logo-list .a,
  .is-on-screen .logo-grid .a {
    opacity: 1;
    transform: none;
  }
  
  @media (hover: hover) {
    .logo-list a:is(:hover, :focus),
    .logo-grid a:is(:hover, :focus) {
      background: var(--base-color-yellow);
    }
  }
  




  .module-brands[data-layout="grid"] .module-wrap {
    max-width: calc(1312 * var(--px));
    margin: 0 auto;
  }

  .logo-grid {
    --columns: 6;
    --base-width: 100%;
    --column-width: calc((var(--base-width) - (var(--column-gap) * var(--columns))) / var(--columns));
    --column-gap: var(--logo-list-gap);
    --row-gap: var(--column-gap);
    margin-right: calc(var(--column-gap) * -1);
    margin-bottom: calc(var(--row-gap) * -1);
    display: flex;
    flex-flow: row wrap;
  }
  
  .logo-grid > * {
    width: var(--column-width);
    margin-right: var(--column-gap);
    margin-bottom: var(--row-gap);
  }