//==============================================================================
// MEDIA
//==============================================================================

// GLOBAL
// -----------------------------------------------------------------------------

img,
object,
embed {
    max-width : 100%;
    height: auto;

    &[width] {
        max-width: auto;
    }
}



img {
    font-style: italic;
    color: $error;
    -ms-interpolation-mode: bicubic;

    a & {
        border:none;
    }
}





//==============================================================================
// Figure
//==============================================================================

figure {
    @include rem(margin, 0 0 $verticalspace);
}



figcaption {
    @include rem(font-size, 12px);
    font-style: italic;
}





/*==============================================================================
Responsive Videos/Embeds

Markup:
<figure class="b-embed-wrapper b-embed--{ratio}">
    <video></video>
    <iframe ></iframe>
</figure>

#{$namespace}embed-wrapper   - on the parent element
#{$namespace}embed--{ratio}  - on the element itself
==============================================================================*/

#{$namespace}embed-wrapper {
    @include rem(margin-bottom, $verticalspace);
    position: relative;
    display: block;
    height: 0;

    &#{$namespace}embed--16-9 {
        padding-top: 56.25%;
    }

    &#{$namespace}embed--4-3 {
        padding-top: 75%;
    }

    > div,
    > embed,
    > object,
    > iframe,
    > video{
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }
}



video {
    @include rem(margin-bottom, $verticalspace);
    width: 100%;
    max-width: 100%;
}





//==============================================================================
// Audio
//==============================================================================

audio {
    &:not([controls]) {
        display: none;
    }
}