4-Column Portfolio Grid

'use client';

import type { ReactNode } from 'react';
import './GalleryGrid4.css';

/**
 * GalleryGrid4 — 4-Column aspect ratio grid for visual galleries and photos.
 */
export interface GalleryGrid4Props {
  className?: string;
  children?: ReactNode;
}

export function GalleryGrid4({ className = '',
  children
}: GalleryGrid4Props) {
  return (
    <>
      <div className={`gal-grid ${className}`} data-rk-fb6612="">
        {children ?? (<>
          <div className="gal-item" data-rk-fb6612=""><span data-rk-fb6612="">Photo 1</span></div>
          <div className="gal-item" data-rk-fb6612=""><span data-rk-fb6612="">Photo 2</span></div>
          <div className="gal-item" data-rk-fb6612=""><span data-rk-fb6612="">Photo 3</span></div>
          <div className="gal-item" data-rk-fb6612=""><span data-rk-fb6612="">Photo 4</span></div>
        </>)}
      </div>
    </>
  );
}

export default GalleryGrid4;

/* GalleryGrid4 — ported from astro-component-kit (layout/GalleryGrid4.astro) */

.gal-grid:where([data-rk-fb6612]) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  width: 100%;
}
.gal-grid:where([data-rk-fb6612]) > *, .gal-item:where([data-rk-fb6612]) {
  aspect-ratio: 1;
  border-radius: 12px;
  background: rgb(var(--ink-rgb, 255 255 255) / 0.04);
  border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-weight: 600;
}