.client-gallery{background:#eae5d5;color:#2c301e;border-block:1px solid #c9c5b1}
.client-gallery__heading{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:30px}
.client-gallery__heading h2{margin:0;font-size:clamp(30px,3.3vw,48px);line-height:1.1}
.client-gallery__heading h2,.client-viewer__top h2{font-family:var(--serif,"Alegreya",Georgia,serif);font-weight:650}
.client-gallery__heading>p{max-width:400px;margin:0;color:#62634f;font-size:15px;line-height:1.65}
.client-gallery__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 18px}
.client-gallery__item{min-width:0;margin:0}
.client-gallery__photo{display:block;position:relative;aspect-ratio:3/4;overflow:hidden;background:#424631;outline-offset:5px}
.client-gallery__photo img{display:block;width:100%;height:100%;object-fit:contain;transition:filter .2s}
.client-gallery__photo:hover img{filter:brightness(1.06)}
.client-gallery__expand{position:absolute;bottom:12px;right:12px;display:grid;place-items:center;width:36px;height:36px;background:#faf7eb;color:#2c301e;font-size:23px}
.client-gallery__item figcaption{font-size:14px;line-height:1.45;padding-top:12px;font-weight:600;overflow-wrap:anywhere}
.client-gallery__item--video .client-gallery__photo:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,#161a0ce0);pointer-events:none}
.client-gallery__play{position:absolute;z-index:1;left:50%;top:45%;transform:translate(-50%,-50%);display:grid;place-items:center;width:66px;height:66px;border-radius:50%;border:1px solid #fbf7eaa6;background:#faf7eb;color:#2c301e}
.client-gallery__play svg{width:27px;height:27px}
.client-gallery__duration{position:absolute;z-index:1;bottom:20px;left:18px;right:18px;color:#fff9e9;font-size:14px;line-height:1.4}
.client-gallery__footer{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-top:26px}
.client-gallery__footer p{margin:0;color:#686955;font-size:13px}
.client-gallery__footer a{flex-shrink:0}
html.client-viewer-open{overflow:hidden;scrollbar-gutter:stable}
.client-viewer{box-sizing:border-box;width:min(1060px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 24px);padding:16px 22px;border:1px solid #848670;background:#24291c;color:#f5f0df;overflow:auto;overscroll-behavior:contain}
.client-viewer::backdrop{background:#10140eeb}
.client-viewer__top,.client-viewer__bottom{display:flex;align-items:center;justify-content:space-between;gap:16px}
.client-viewer__top h2{font-size:24px;line-height:1.2;margin:0}
.client-viewer button{display:grid;place-items:center;flex-shrink:0;width:44px;min-height:44px;border:1px solid #f5f0df55;background:transparent;color:inherit;font:inherit;font-size:22px;cursor:pointer}
.client-viewer button:disabled{opacity:.35;cursor:default}
.client-viewer button:focus-visible,.client-gallery__photo:focus-visible{outline:3px solid #bd8f40;outline-offset:3px}
.client-viewer__photos{height:min(70dvh,780px,calc(100dvh - 180px));width:100%;margin:16px 0}
.client-viewer__photos .swiper-slide{display:flex;align-items:center;justify-content:center}
.client-viewer__photos img{display:block;max-width:100%;width:100%;height:100%;object-fit:contain}
.client-viewer__video{display:block;max-width:100%;width:auto;max-height:min(70dvh,calc(100dvh - 180px));margin:16px auto;background:#10140e}
.client-viewer [hidden]{display:none!important}
.client-viewer__bottom p{margin:0;text-align:center;font-size:14px;line-height:1.45;flex:1;min-width:0}
@media(max-width:1050px){.client-gallery__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.client-gallery__heading{align-items:start}.client-gallery__heading>p{max-width:330px}}
@media(max-width:700px){
  .client-gallery__heading{display:block;margin-bottom:23px}
  .client-gallery__heading>p{margin-top:16px;max-width:none}
  .client-gallery__grid{gap:22px 12px}
  .client-gallery__item figcaption{font-size:13px}
  .client-gallery__footer{align-items:start;flex-direction:column;gap:14px}
  .client-gallery__play{width:48px;height:48px}
  .client-gallery__duration{font-size:12px;left:12px;right:12px;bottom:13px}
  .client-gallery__expand{width:29px;height:29px;bottom:8px;right:8px;font-size:19px}
  .client-viewer{width:calc(100vw - 16px);padding:12px;max-height:calc(100dvh - 16px)}
  .client-viewer__top h2{font-size:21px}
  .client-viewer__photos{height:min(65dvh,calc(100dvh - 170px));margin:12px 0}
  .client-viewer__bottom{gap:10px}
  .client-viewer__bottom p{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.client-gallery__photo img{transition:none}}