.pg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pg-medzera, 16px);
  align-items: start;
}

.pg > * {
  display: flex;
  flex-direction: column;
  gap: var(--pg-medzera, 16px);
  min-width: 0;
  will-change: transform;
}

/* Query Loop vypisuje vlastné pravidlo s medzerou v chybnom zápise, preto ju držíme tu. */
.pg .cb-collection__items {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pg-medzera, 16px);
}

/* Bodkované pozadie s obláčikovou maskou — rovnaké ako v komponente Referencia karta.
   Dá sa dať ako trieda .ref-pozadie na ľubovoľnú sekciu na stránke s touto galériou. */
.ref-pozadie {
  position: relative;
  isolation: isolate;
}

.ref-pozadie::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(17, 33, 47, .2) 1px, transparent 1.4px);
  background-size: 22px 22px;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='1600' viewBox='0 0 1200 1600' preserveAspectRatio='none'><filter id='o' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.0016' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  3 0 0 0 -1.45'/></filter><rect width='100%' height='100%' filter='url(%23o)'/></svg>");
  mask-size: 100% 100%;
}

/* Celá stránka: maska je vysoká ako stránka (výšku 7800 upraviť, ak sa stránka výrazne zmení),
   aby obláčiky neboli natiahnuté. */
main.ref-pozadie::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='7800' viewBox='0 0 1200 7800' preserveAspectRatio='none'><filter id='o' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.0016' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  3 0 0 0 -1.45'/></filter><rect width='100%' height='100%' filter='url(%23o)'/></svg>");
}

@media (max-width: 767px) {
  .pg {
    grid-template-columns: 1fr;
  }

  .pg > * {
    will-change: auto;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pg > * {
    transform: none !important;
  }
}