document.addEventListener("DOMContentLoaded", function () {
  const url = new URL(window.location.href);
  const page = url.searchParams.get("page") || "1";
  const perPage = url.searchParams.get("per_page");

  if (page !== "1" || perPage) return;

  const grid = document.querySelector(".gallery-grid");
  if (!grid) return;

  const sample = grid.querySelector(".gallery-item");
  if (!sample) return;

  const gridStyle = window.getComputedStyle(grid);
  const gridGap = parseFloat(gridStyle.getPropertyValue("gap")) || 0;
  const sampleWidth = sample.getBoundingClientRect().width + gridGap;
  const containerWidth = grid.getBoundingClientRect().width;

  const columns = Math.floor(containerWidth / sampleWidth);
  const calculatedPerPage = columns * 5;

  url.searchParams.set("per_page", calculatedPerPage);
  url.searchParams.set("page", "1");

  window.location.replace(url.toString());
});