/* Home "Our Clients": logos on the open white canvas, separated by hairline dividers only. */

.logo-wall-section--cards { background: #fff; }
.logo-wall-section--cards .head-center { margin-bottom: clamp(48px, 5vw, 72px); }
.logo-wall-section--cards .eyebrow { font-weight: 500; letter-spacing: 3px; color: #a08a3c; }

.logo-wall-section--cards .logo-wall {
  --cols: 5;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.logo-wall-section--cards .logo-wall__cell {
  height: 128px;
  padding: 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
/* Hairlines between cells only: a right rule except on the last column, a bottom rule except on the last row. */
.logo-wall-section--cards .logo-wall__cell:not(:nth-child(5n)) { border-right: 1px solid #efeee9; }
.logo-wall-section--cards .logo-wall__cell:not(:nth-last-child(-n+5)) { border-bottom: 1px solid #efeee9; }

.logo-wall-section--cards .logo-wall__cell img {
  max-width: 62%;
  max-height: 44px;
  opacity: .92;
  mix-blend-mode: multiply; /* any baked-in white behind a logo melts into the page */
  transition: opacity .3s ease, transform .3s ease;
}
.logo-wall-section--cards .logo-wall__cell:hover img { opacity: 1; transform: scale(1.04); }

/* These marks are small inside their image canvas; scale up to match the others' visual weight. */
.logo-wall-section--cards .logo-wall__cell--ariglad img,
.logo-wall-section--cards .logo-wall__cell--omantel img,
.logo-wall-section--cards .logo-wall__cell--gus img,
.logo-wall-section--cards .logo-wall__cell--esg img { transform: scale(1.3); }
.logo-wall-section--cards .logo-wall__cell--ariglad:hover img,
.logo-wall-section--cards .logo-wall__cell--omantel:hover img,
.logo-wall-section--cards .logo-wall__cell--gus:hover img,
.logo-wall-section--cards .logo-wall__cell--esg:hover img { transform: scale(1.35); }

@media (max-width: 1100px) {
  .logo-wall-section--cards .logo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .logo-wall-section--cards .logo-wall__cell { height: 112px; }
  .logo-wall-section--cards .logo-wall__cell:not(:nth-child(5n)) { border-right: 0; }
  .logo-wall-section--cards .logo-wall__cell:not(:nth-last-child(-n+5)) { border-bottom: 0; }
  .logo-wall-section--cards .logo-wall__cell:not(:nth-child(4n)) { border-right: 1px solid #efeee9; }
  .logo-wall-section--cards .logo-wall__cell:not(:nth-last-child(-n+4)) { border-bottom: 1px solid #efeee9; }
}

@media (max-width: 720px) {
  .logo-wall-section--cards .logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logo-wall-section--cards .logo-wall__cell { height: 88px; padding: 12px; }
  .logo-wall-section--cards .logo-wall__cell:not(:nth-child(4n)) { border-right: 0; }
  .logo-wall-section--cards .logo-wall__cell:not(:nth-last-child(-n+4)) { border-bottom: 0; }
  .logo-wall-section--cards .logo-wall__cell:nth-child(odd) { border-right: 1px solid #efeee9; }
  .logo-wall-section--cards .logo-wall__cell:not(:nth-last-child(-n+2)) { border-bottom: 1px solid #efeee9; }
  /* Each logo gets its own height so every mark covers about the same area (~2200px²),
     instead of wide logos shrinking to the width cap and squarer ones filling the height cap. */
  .logo-wall-section--cards .logo-wall__cell img { width: auto; max-width: 100%; max-height: none; height: 26px; }
  .logo-wall-section--cards .logo-wall__cell[class*="logo-wall__cell--"] img,
  .logo-wall-section--cards .logo-wall__cell[class*="logo-wall__cell--"]:hover img { transform: none; }
  .logo-wall-section--cards .logo-wall__cell img[src$="/t01.png"] { height: 21.7px; }
  .logo-wall-section--cards .logo-wall__cell img[src$="/t02.png"] { height: 25.4px; }
  .logo-wall-section--cards .logo-wall__cell img[src$="/t03.png"] { height: 26.4px; }
  .logo-wall-section--cards .logo-wall__cell img[src$="/t04.png"] { height: 20.3px; }
  .logo-wall-section--cards .logo-wall__cell img[src$="/t05.png"] { height: 29.8px; }
  .logo-wall-section--cards .logo-wall__cell img[src$="/t06.png"] { height: 21.7px; }
  .logo-wall-section--cards .logo-wall__cell img[src$="/t07.png"] { height: 28.0px; }
  .logo-wall-section--cards .logo-wall__cell img[src$="/t08.png"] { height: 37px; }
  .logo-wall-section--cards .logo-wall__cell img[src$="/t09.png"] { height: 36.0px; }
  .logo-wall-section--cards .logo-wall__cell img[src$="/t10.png"] { height: 26.4px; }
  .logo-wall-section--cards .logo-wall__cell img[src$="/t11.png"] { height: 21.2px; }
  .logo-wall-section--cards .logo-wall__cell img[src$="/t12.png"] { height: 22.9px; }
  .logo-wall-section--cards .logo-wall__cell img[src$="/t13.png"] { height: 28.3px; }
  .logo-wall-section--cards .logo-wall__cell img[src$="/t14.png"] { height: 20.9px; }
  .logo-wall-section--cards .logo-wall__cell img[src$="/t15.png"] { height: 19.3px; }
  .logo-wall-section--cards .logo-wall__cell img[src$="/t16.png"] { height: 24.1px; }
  .logo-wall-section--cards .logo-wall__cell img[src$="/t17.png"] { height: 26.1px; }
  .logo-wall-section--cards .logo-wall__cell img[src$="/t18.png"] { height: 21.7px; }
  .logo-wall-section--cards .logo-wall__cell img[src$="/omantel.png"] { height: 38px; }
  .logo-wall-section--cards .logo-wall__cell img[src$="/mashreq.svg"] { height: 21.5px; }
}