---
const className = 'relative -z-10 border-4 border-crusta-200 dark:border-night-800 rounded-lg shadow-lgr shadow-crusta-400/20 dark:shadow-night-400/50 my-2' + 
    ' sm:w-[var(--props-size)]' +
    ' sm:m-[var(--props-center)]'

const props = Astro.props

---

<div>
    <img 
        src={props.src} 
        alt={props.alt} 
        class={className}
        style={{
            //@ts-ignore
            '--props-size': props.size + '%',
            '--props-center': props.center ? 'auto' : 'none',
        }}
    />
    
    <p class="text-sm italic text-subtitle mt-2">{props.alt}</p>
</div>