/* Client photo gallery on the homepage */
.gs-clients .sec-head p { max-width: 44ch; }
.gs-cl-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.gs-cl { position: relative; margin: 0; overflow: hidden; background: var(--graphite); border: 1px solid var(--line); border-radius: var(--r); grid-column: span 3; height: clamp(380px, 36vw, 480px); }
.gs-cl.a { grid-column: span 5; height: clamp(300px, 28vw, 380px); }
.gs-cl.b { grid-column: span 3; height: clamp(300px, 28vw, 380px); }
.gs-cl.c { grid-column: span 4; height: clamp(300px, 28vw, 380px); }
.gs-cl.h { grid-column: span 6; height: clamp(340px, 33vw, 440px); }
.gs-cl.p { grid-column: span 3; height: clamp(340px, 33vw, 440px); }
.gs-cl img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 30%); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.gs-cl::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(to top, rgba(7, 8, 7, .92), rgba(7, 8, 7, 0)); pointer-events: none; }
.gs-cl figcaption { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 14px; color: var(--chalk); }
.gs-cl figcaption b { display: block; font: 800 clamp(22px, 2.1vw, 30px)/1.02 var(--display); letter-spacing: .01em; text-transform: uppercase; }
.gs-cl figcaption span { display: inline-block; margin-bottom: 7px; padding: 3px 9px; background: var(--volt); color: var(--volt-ink); font: 700 12px/1.3 var(--cond); letter-spacing: .08em; text-transform: uppercase; transform: skewX(var(--slant)); }
.gs-cl:hover img { transform: scale(1.035); }
.gs-cl-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; }
.gs-cl-cta p { margin: 0; color: var(--smoke); }
@media (max-width: 760px) {
  .gs-cl-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .gs-cl, .gs-cl.b { grid-column: span 1; height: 62vw; min-height: 230px; }
  .gs-cl.a, .gs-cl.c, .gs-cl.w, .gs-cl.h { grid-column: span 2; height: 66vw; }
  .gs-cl.p { grid-column: span 1; height: 72vw; }
  .gs-cl.b { grid-column: span 2; }
  .gs-cl figcaption { left: 10px; right: 10px; bottom: 10px; }
  .gs-cl figcaption b { font-size: 19px; }
  .gs-cl figcaption span { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .gs-cl img { transition: none; } .gs-cl:hover img { transform: none; } }