/* shortwind: media@0.0.1 sha:dfc85633101b0637 */

/* @guide
   @avatar (with @avatar-sm/lg) is a round user image; @thumb is a small square
   thumbnail. For responsive embeds use @aspect-square or @aspect-video. Avatars
   are circular by default — don't restyle the radius.
*/

/* User/profile avatar. */
@recipe avatar {
  inline-flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-muted text-sm font-medium text-muted-foreground
}

/* Small avatar. */
@recipe avatar-sm {
  @avatar h-6 w-6 text-xs
}

/* Large avatar. */
@recipe avatar-lg {
  @avatar h-14 w-14 text-base
}

/* Small image thumbnail. */
@recipe thumb {
  h-16 w-16 rounded-md object-cover
}

/* 1:1 aspect-ratio wrapper. */
@recipe aspect-square {
  aspect-square w-full overflow-hidden rounded-md
}

/* 16:9 aspect-ratio wrapper. */
@recipe aspect-video {
  aspect-video w-full overflow-hidden rounded-md
}