{{#section "styles"}}
<link rel="stylesheet" href="{{baseUrl}}/static/css/stack.css">
{{/section}}

<h1>Technology Stack</h1>
<section class="stack-grid">
    {{#each tech}}
    <article class="stack-item">
        <a href="{{url}}" target="_blank" rel="noopener noreferrer">
            <picture>
                {{#if svg}}
                {{#if png}}
                <source srcset="{{svg}}" type="image/svg+xml">
                <img src="{{png}}" alt="{{name}} logo" width="300" height="200" loading="lazy">
                {{else}}
                <img src="{{svg}}" alt="{{name}} logo" width="300" height="200" loading="lazy">
                {{/if}}
                {{else if png}}
                <img src="{{png}}" alt="{{name}} logo" width="300" height="200" loading="lazy">
                {{/if}}
            </picture>
        </a>
        <h2>{{name}}</h2>
        <p>{{description}}</p>
    </article>
    {{/each}}
</section>