/* Prosty, czytelny układ: masonry kolumnami, maks 5 kolumn, kafelki doklejone, zoom zdjęcia na hover */
    :root{
      --max-width:1200px; /* dostosuj jeśli chcesz węższy/ szerszy kontener */
    }
    *{box-sizing:border-box}
    body{margin:0;padding:20px;font-family:Inter,Georgia,Helvetica,sans-serif;background:#f5f6f8;color:#111}

    .wrap{
      width:60%;
      max-width:var(--max-width);
      margin:0 auto;
    }
    h1{font-size:20px;margin:0 0 16px}

    /* Masonry - kolumny */
    .masonry{
      column-count:3;      /* maksymalnie 5 kolumn */
      column-gap:0;        /* kafelki doklejone do siebie */
    }
    @media (max-width:1200px){ .masonry{ column-count:4 } }
    @media (max-width:900px){  .masonry{ column-count:3 } }
    @media (max-width:650px){  .masonry{ column-count:2 } }
    @media (max-width:420px){  .masonry{ column-count:1 } }

    /* Kafelek: całość jest w kolumnie, break-inside: avoid zapobiega rozdzielaniu */
    .tile{
      break-inside:avoid;
      margin:0;                /* doklejone do siebie w pionie */
      background:white;
      border:1px solid #777; /* delikatna ramka między kafelkami */
      overflow:hidden;
    }

    /* Media wrapper kontroluje proporcje/rozmiar kafelka niezależnie od zdjęcia */
    .media{
      width:100%;
      display:block;
      overflow:hidden;
      background:#ddd; /* placeholder przy wolnym ładowaniu obrazów */
    }
    /* warianty proporcji: dostosuj do potrzeb */
    .media--square{ aspect-ratio:1/1 }
    .media--4-3{ aspect-ratio:4/3 }
    .media--16-9{ aspect-ratio:16/9 }
    .media--tall{ aspect-ratio:3/4 }

    /* Zdjęcie zawsze wypełnia wrapper i jest przycinane proporcjonalnie */
    .media img{
      width:100%;
      height:100%;
      object-fit:cover; /* przycinanie proporcjonalne */
      display:block;
      transform-origin:center center;
      transition: transform .35s ease; /* animacja powiększenia */
      will-change:transform;
    }
    .tile:hover .media img{ transform:scale(1.12) }

    /* Opis kafelka */
    .desc{ padding:10px;font-size:14px;line-height:1.3 }

    /* Opcjonalne: mały odstęp między opisem a zdjęciem, bez rozrywania layoutu */
    .tile + .tile{ border-top:0 }