/* Responsive sizing for content <img>/<video> tagged with the image-pc-size /
   image-mobile-size HTML attributes (authored in RST raw:: html blocks).
   Pure-CSS replacement for the former image-fit.js: same 1200px breakpoint
   convention used throughout _static/css/top/, no resize-listener JS, and no
   flash of unsized content before JS would have executed.

   Centering/display:block on desktop comes from the existing
   .top-block-container > img/video, .top-block-detail > img/video rule in
   content.css; this file only owns the width/height swap at the breakpoint. */

img[image-pc-size],
video[image-pc-size] {
    height: auto;
}

img[image-pc-size="30%"], video[image-pc-size="30%"] { width: 30%; }
img[image-pc-size="40%"], video[image-pc-size="40%"] { width: 40%; }
img[image-pc-size="45%"], video[image-pc-size="45%"] { width: 45%; }
img[image-pc-size="50%"], video[image-pc-size="50%"] { width: 50%; }
img[image-pc-size="55%"], video[image-pc-size="55%"] { width: 55%; }
img[image-pc-size="60%"], video[image-pc-size="60%"] { width: 60%; }
img[image-pc-size="65%"], video[image-pc-size="65%"] { width: 65%; }
img[image-pc-size="70%"], video[image-pc-size="70%"] { width: 70%; }
img[image-pc-size="75%"], video[image-pc-size="75%"] { width: 75%; }
img[image-pc-size="80%"], video[image-pc-size="80%"] { width: 80%; }
img[image-pc-size="85%"], video[image-pc-size="85%"] { width: 85%; }
img[image-pc-size="90%"], video[image-pc-size="90%"] { width: 90%; }
img[image-pc-size="95%"], video[image-pc-size="95%"] { width: 95%; }
img[image-pc-size="100%"], video[image-pc-size="100%"] { width: 100%; }

@media (max-width: 1200px) {
    img[image-mobile-size],
    video[image-mobile-size] {
        height: auto;
        margin-left: auto;
        margin-right: auto;
        margin-top: 1em;
        margin-bottom: 1em;
        display: block;
        float: none;
    }

    img[image-mobile-size="60%"], video[image-mobile-size="60%"] { width: 60%; }
    img[image-mobile-size="65%"], video[image-mobile-size="65%"] { width: 65%; }
    img[image-mobile-size="70%"], video[image-mobile-size="70%"] { width: 70%; }
    img[image-mobile-size="75%"], video[image-mobile-size="75%"] { width: 75%; }
    img[image-mobile-size="80%"], video[image-mobile-size="80%"] { width: 80%; }
    img[image-mobile-size="85%"], video[image-mobile-size="85%"] { width: 85%; }
    img[image-mobile-size="90%"], video[image-mobile-size="90%"] { width: 90%; }
    img[image-mobile-size="95%"], video[image-mobile-size="95%"] { width: 95%; }
    img[image-mobile-size="100%"], video[image-mobile-size="100%"] { width: 100%; }
}