components/image-gallery.js

class CustomImageGallery extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .gallery-container {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 1.5rem;
          padding: 2rem 0;
        }
        .gallery-item {
          border-radius: 0.75rem;
          overflow: hidden;
          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
          transition: transform 0.3s ease;
        }
        .gallery-item:hover {
          transform: scale(1.05);
        }
        .gallery-image {
          width: 100%;
          height: 200px;
          object-fit: cover;
        }
      </style>
      <div class="gallery-container">
        <div class="gallery-item">
          <img src="https://images.unsplash.com/photo-1581094794323-84594653b0b7?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Semiconductor Wafer Inspection" class="gallery-image">
        </div>
        <div class="gallery-item">
          <img src="https://images.unsplash.com/photo-1581094794326-83208d661637?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Cleanroom Equipment" class="gallery-image">
        </div>
        <div class="gallery-item">
          <img src="https://images.unsplash.com/photo-1581094794329-c8112cbf0d1c?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Semiconductor Manufacturing" class="gallery-image">
        </div>
      </div>
    `;
  }
}

customElements.define('custom-image-gallery', CustomImageGallery);