/* Shihab public site: the clients (the home page's «عملاؤنا», Trello #132; `CLIENTS` in build-site.py), linked only
   from the pages that show them. Each restaurant's own logo on a rounded tile, its name and what it is under it.
   Three to a row on a phone with the last row centred, all in one row from 760 px. The logos keep their own
   colours; the rounding stays small enough to cut no lettering. Tokens (--line, --ink, --mut, --kufi, --lat) are
   style.css's, the section around it is pages.css's `.sec`. */
.clients{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.clients li{display:flex;flex-direction:column;align-items:center;flex:0 1 calc((100% - 24px)/3);min-width:0;padding:18px 6px 16px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.04);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-align:center}
.clients img{display:block;width:clamp(62px,18vw,96px);height:auto;aspect-ratio:1;margin-bottom:12px;border-radius:22%;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 16px 34px -16px rgba(0,0,0,.95)}
.clients strong{color:var(--ink);font:700 clamp(13.5px,3.6vw,16.5px)/1.45 var(--kufi)}
html[lang=en] .clients strong{font:600 clamp(13.5px,3.5vw,15.5px)/1.35 var(--lat)}
.clients span{margin-top:2px;color:var(--mut);font-size:13px;line-height:1.5}
@media(min-width:760px){.clients{gap:16px}.clients li{flex-basis:calc((100% - 64px)/5);padding:26px 12px 22px}}