components/grid.js

class CustomGrid extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          --grid-cols: 1;
          --grid-gap: 1.5rem;
          --item-padding: 1.5rem;
        }
        .grid-container {
          display: grid;
          gap: var(--grid-gap);
          grid-template-columns: repeat(var(--grid-cols), 1fr);
        }
        .grid-item {
          padding: var(--item-padding);
          background: white;
          border-radius: 12px;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
          transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .grid-item:hover {
          transform: translateY(-4px);
          box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        @media (min-width: 640px) {
          :host {
            --grid-cols: 2;
          }
        }
        @media (min-width: 1024px) {
          :host {
            --grid-cols: 3;
          }
        }
      </style>
      <div class="grid-container">
        <slot></slot>
      </div>
    `;
  }
}
customElements.define('custom-grid', CustomGrid);