//  Images - Variables
// ============================================================================

$image-background       : color(grey, light)
$image-profile-margin   : 1rem 3rem
$image-profile-width    : $width-profile
$image-ratio            : $image-ratio
$image-width-l          : 100%
$image-width-m          : 75%
$image-width-s          : 50%


//  Images - Style
// ============================================================================

//  Image Containers
//  .image-container - container for figures and inline images
//  .image-hero      - container for hero image for blog posts
//  .image-profile   - container for profile photo

.image-container
    @extend .block
    margin-left: 0
    margin-right: 0

.image-profile
    @include size($image-profile-width)
    background: $image-background
    border-radius: 50%
    margin: $image-profile-margin
    overflow: hidden
    shape-outside: circle()


//  Image sizes
//  .image--small  - small width
//  .image--medium - medium width
//  .image--large  - large width

.image--small
    width: $image-width-s

.image--medium
    width: $image-width-m

.image--large
    width: $image-width-l


//  Global image ratio

.image-ratio
    background: $image-background
    height: 0
    overflow: hidden
    padding-bottom: (100% / $image-ratio)
    width: 100%