/*----------------------------------------------------------------------------*\
    IMAGE
    .image
\*----------------------------------------------------------------------------*/

/*  Variables
\*----------------------------------------------------------------------------*/

$use-image: true !default;

/*  Component
\*----------------------------------------------------------------------------*/

@if $use-image == true {

    .image--left{
        display: block;
        float: left;
    }

    .image--right{
        display: block;
        float: right;
    }

    .image--center{
        display: block;
        margin: 0 auto;
    }

    // IMAGES BASED ON BREAKPOINTS
    @each $state in $breakpoint-has-images {
        @include media-query(#{$state}) {

            // Text alignment
            .image--left--#{$state}{
                display: block;
                float: left;
            }
            .image--right--#{$state}{
                display: block;
                float: right;
            }
            .image--center--#{$state}{
                display: block;
                margin: 0 auto;
            }

        }
    }

}