@layer base {
  body {
    @apply bg-gallery-50 text-gallery-900 transition-colors duration-300 antialiased;
  }
  
  .dark body {
    @apply bg-gallery-950 text-gallery-50;
  }
}

@layer utilities {
  .masonry {
    column-count: 1;
    column-gap: 1.5rem;
  }
  @media (min-width: 640px) {
    .masonry {
      column-count: 2;
    }
  }
  @media (min-width: 1024px) {
    .masonry {
      column-count: 3;
    }
  }
  .masonry-item {
    break-inside: avoid;
    margin-bottom: 1.5rem;
  }
}