<template id="tesoft-project-card-template">
    <style>
        @import "/src/styles/default.css";

        :host {
            display: block;
        }

        :host > a {
            background-color: var(--gray);
            border-radius: 0.5rem;
            display: grid;
            gap: var(--small-padding);
            grid-template-columns: 8rem auto 1fr;
            grid-template-rows: auto auto;
            padding: var(--medium-padding);
            text-decoration: none;
            text-align: justify;
        }

        :host > a:hover {
            background-color: var(--gold);
            color: var(--gray);
            text-decoration: none;
        }

        :host > a:hover ::slotted(a) {
            color: var(--gray) !important;
        }

        .logo {
            display: grid;
            grid-column: 1;
            grid-row-start: 1;
            grid-row-end: 3;
        }

        img {
            width: 100%;
        }

        .separator {
            border-left-color: var(--dark-gray);
            border-left-style: solid;
            border-left-width: 0.2rem;
            grid-column: 2;
            grid-row-start: 1;
            grid-row-end: 3;
        }
    </style>

    <a target="_blank" rel="noopener noreferrer">
        <div class="logo">
            <img src="">
        </div>
        <div class="separator"></div>
        <div>
            <h4>Title</h4>
            <slot></slot>
        </div>
    </a>
</template>

<script src="/src/components/project-card.ts" type="module"></script>
