// ==========================================================================
// Generic / Media
// ==========================================================================

// 1. Setting `vertical-align` removes the whitespace that appears under `img`
//    elements when they are dropped into a page as-is. Safer alternative to
//    using `display: block;`.

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle; // [1]
}

// Add the correct display in iOS 4-7.

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

// 2. Fluid media for responsive purposes.

img,
svg {
    max-width: 100%; // [2]
    height: auto;

    // 4. If a `width` and/or `height` attribute have been explicitly defined,
    //    let’s not make the image fluid.

    &[width], // [4]
    &[height] {
        // [4]
        max-width: none;
    }
}

// 4. Offset `alt` text from surrounding copy.

img {
    font-style: italic; // [4]
}

// 5. SVG elements should fallback to their surrounding text color.

svg {
    fill: currentColor; // [5]
}