---
const { img, name, site, pronouns, role } = Astro.props;
---
<style>
    .member {
        width: 200px;
        height: 100px;
        padding: 5px;
        margin: 20px;
        line-height: 3px;
        display: flex;
        border-radius: 15px;
        background-color: #078969;
        align-items: center;
    }
    .text {
        margin: 5px;
    }
    img {
        border-radius: 360%;
        width: 50px;
        height: 50px;
        margin: 3px;
    }
    h1 {
        color: #fafed7;
    }
    i, b {
        color: white;
        font-size: small;
    }
</style>
<a class="member" href={`https://${site}`}>
    <img src={`https://${img}`}>
    <div class="text">
        <h1>{name}</h1>
        <b>{role}</b> <i>({pronouns})</i>
    </div>
</a>