/* =========================================================
   GLOBAL CORPORATE & INVESTMENT BANKING — Page « À propos » (a-propos.html)
   Galerie « Our environment ». Le reste de la page utilise gx.css.
========================================================= */

.ab-mosaic{ display:grid; grid-template-columns: repeat(3,1fr); grid-auto-rows: 260px; gap: 18px; }
.ab-tile{ position:relative; margin:0; overflow:hidden; border-radius: 10px; background: var(--steel-100); }
.ab-tile-tall{ grid-row: span 2; }
.ab-tile-wide{ grid-column: span 2; }
.ab-tile picture{ display:block; width:100%; height:100%; }
.ab-tile img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform 1.1s var(--gx-ease, ease); }
.ab-tile:hover img{ transform: scale(1.05); }
.ab-tile figcaption{
  position:absolute; left:0; right:0; bottom:0; padding: 44px 22px 18px; color:#fff; font-size:.8rem;
  letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  background: linear-gradient(0deg, rgba(6,18,36,.85), rgba(6,18,36,0));
}

@media (max-width: 800px){
  .ab-mosaic{ grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; }
  .ab-tile-tall{ grid-row: span 1; }
}
@media (max-width: 600px){
  .ab-mosaic{ grid-template-columns: 1fr; }
  .ab-tile-wide{ grid-column: span 1; }
}
@media (prefers-reduced-motion: reduce){ .ab-tile img{ transition:none; } }