.mzlgi-root {
  --mzlgi-cols-xs: 2;
  --mzlgi-cols-md: 3;
  --mzlgi-cols-lg: 5;
  --mzlgi-gap-xs: 4px;
  --mzlgi-gap-md: 8px;
  --mzlgi-gap-lg: 16px;
}

.mzlgi-grid {
  display: grid;
  grid-template-columns: repeat(var(--mzlgi-cols-xs), minmax(0, 1fr));
  gap: var(--mzlgi-gap-xs);
}

@media (min-width: 768px) {
  .mzlgi-grid {
    grid-template-columns: repeat(var(--mzlgi-cols-md), minmax(0, 1fr));
    gap: var(--mzlgi-gap-md);
  }
}

@media (min-width: 992px) {
  .mzlgi-grid {
    grid-template-columns: repeat(var(--mzlgi-cols-lg), minmax(0, 1fr));
    gap: var(--mzlgi-gap-lg);
  }
}

.mzlgi-item {
  box-sizing: border-box;
}

.mzlgi-item--hidden {
  display: none !important;
}

.mzlgi-loading,
.mzlgi-end {
  margin-top: 12px;
  text-align: center;
  font-size: 0.875rem;
  opacity: 0.8;
}

.mzlgi-empty {
  text-align: center;
  padding: 24px 0;
  font-size: 0.95rem;
  opacity: 0.7;
}

.mzlgi-sentinel {
  width: 100%;
  height: 1px;
}