/* Oui Gallery: masonry layout (CSS columns, pictures in reading order down each column) */
/* --oui-n / --oui-n-mobile: columns actually filled (fewer pictures than columns): same column width as a full row, centered */
.oui-masonry {
  --oui-c: var(--oui-cols-mobile, 2); --oui-k: var(--oui-n-mobile, var(--oui-cols-mobile, 2));
  columns: var(--oui-k); column-gap: var(--oui-gap, 10px);
  max-width: calc((100% - (var(--oui-c) - 1) * var(--oui-gap, 10px)) / var(--oui-c) * var(--oui-k) + (var(--oui-k) - 1) * var(--oui-gap, 10px));
  margin-inline: auto;
}
@media (min-width: 768px) { .oui-masonry { --oui-c: var(--oui-cols, 3); --oui-k: var(--oui-n, var(--oui-cols, 3)); } }
.oui-masonry__item { break-inside: avoid; margin: 0 0 var(--oui-gap, 10px); }
.oui-masonry__item a { display: block; overflow: hidden; }
.oui-masonry__item img { display: block; width: 100%; height: auto; transition: transform .3s; }
.oui-masonry__item a:hover img, .oui-masonry__item a:focus-visible img { transform: scale(1.04); }
.oui-masonry__item a:focus-visible { outline: 3px solid currentColor; outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .oui-masonry__item img { transition: none; } }