---
interface Props {
    src: string
    author: string
    url: string
}

const { src, author, url } = Astro.props
---

<figure>
    <a href={url}>
        <img src={src} alt={author}>
    </a>
    <figcaption>
        <span>Author: {author}</span>
    </figcaption>
</figure>

<style>
img {
    border-radius: calc(var(--card-radius) - 8px);
}

figure {
    padding: .8rem;
    padding-bottom: 0;
    border-radius: var(--card-radius);
    background-color: color-mix(in srgb, var(--sl-color-black), var(--sl-color-white) 2%);
    border: 1px solid var(--sl-color-gray-6);
}

figcaption {
    text-align: center;
    margin: 0;
}
</style>