.gl-client-logos-wrap{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  background:#e9edf2;
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  padding:16px;
}

.gl-client-logos-swiper{ width:100%; }

.gl-client-logo-card{
  height:90px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:10px;
  padding:10px 14px;
}

.gl-client-logo-card img{
  max-height:70px;
  max-width:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;

  /* helps white logos */
  filter: drop-shadow(0 0 2px rgba(0,0,0,.35)) grayscale(100%);
  opacity:.9;
  transition:.2s ease;
}
.gl-client-logo-card:hover img{
  filter: drop-shadow(0 0 2px rgba(0,0,0,.35));
  opacity:1;
}
/* Theme-proof Swiper layout */
.gl-client-logos-swiper.swiper { overflow: hidden; }
.gl-client-logos-swiper .swiper-wrapper { display:flex !important; }
.gl-client-logos-swiper .swiper-slide { flex-shrink:0; }


/* MOBILE/TABLET: never force fixed slide widths */
@media (max-width: 1024px){
  .gl-client-logos-swiper .swiper-slide{
    width: auto !important;
  }
}
/* ================================
   MOBILE PORTRAIT FIX (Android/iPhone)
   - 1 centered logo
   - consistent card size
   - no "random" widths
================================ */
@media (max-width: 480px) and (orientation: portrait){

  .gl-client-logos-wrap{
    padding: 12px 12px !important; /* tighter so card fits */
  }

 @media (max-width: 480px) and (orientation: portrait){

  .gl-client-logos-wrap{
    padding: 10px 10px !important;
  }

  /* Make the slide take full viewport so centering is stable */
  .gl-client-logos-swiper .swiper-slide{
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  /* Make the CARD smaller (this is the key change) */
  .gl-client-logo-card{
    width: clamp(200px, 72vw, 260px) !important;
    max-width: 100% !important;
    height: 74px !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
  }

  .gl-client-logo-card img{
    max-height: 48px !important;
  }
}

/* ================================
   MOBILE: one centered slide, no peek
================================ */
@media (max-width: 480px) and (orientation: portrait){

  .gl-client-logos-wrap{
    padding: 10px 10px !important;
  }

  /* Swiper viewport must hide overflow for no-peek */
  .gl-client-logos-swiper.swiper{
    overflow: hidden !important;
  }

  /* IMPORTANT: let Swiper control widths */
  .gl-client-logos-swiper .swiper-slide{
    width: 100% !important;           /* one slide spans viewport */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  /* Card size */
  .gl-client-logo-card{
    width: clamp(200px, 72vw, 260px) !important;
    height: 74px !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
  }

  .gl-client-logo-card img{
    max-height: 48px !important;
  }

  /* arrows smaller */
  .gl-client-logos-prev,
  .gl-client-logos-next{
    width: 40px !important;
    height: 40px !important;
    font-size: 22px !important;
  }

  .gl-client-logos-prev{ left: -14px !important; }
  .gl-client-logos-next{ right: -14px !important; }
}
/* ================================
   PHONE LANDSCAPE: show 2 neatly
================================ */
@media (max-width: 900px) and (orientation: landscape){

  .gl-client-logos-wrap{
    padding: 10px 14px !important;
  }

  .gl-client-logos-swiper.swiper{
    overflow: hidden !important;
  }

  /* don’t let slides get weird widths */
  .gl-client-logos-swiper .swiper-slide{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* smaller cards in landscape so 2 fit nicely */
  .gl-client-logo-card{
    width: clamp(220px, 42vw, 320px) !important;
    height: 72px !important;
    padding: 8px 10px !important;
  }

  .gl-client-logo-card img{
    max-height: 46px !important;
  }

  /* slightly smaller arrows */
  .gl-client-logos-prev,
  .gl-client-logos-next{
    width: 38px !important;
    height: 38px !important;
    font-size: 20px !important;
  }
}