components/arch-app-grid.js

class ArchAppGrid extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
        this.render();
    }

    render() {
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    gap: 16px;
                    padding: 8px;
                }
                @media (min-width: 768px) {
                    :host {
                        grid-template-columns: repeat(6, 1fr);
                    }
                }
            </style>
            <slot></slot>
        `;
    }
}

customElements.define('arch-app-grid', ArchAppGrid);