AMP-html element media queries in Safari/IE

Question

I am using the element media query to display 2 different amp-carousels so I can load the images at different sizes but it doesn't seem to work in IE or Safari. Is there a better way to do this? Below is the code I have:

<!--carousel for mobile --> 
          <amp-carousel width="800"
              height="600"
              layout="responsive"
              type="slides"
              autoplay
              delay="5000"
              media="(max-width: 768px)">
              
           <div class="slide">
                <amp-img src="/img/amp/slide1.jpg"
                width="800"
                height="600"
                layout="responsive"></amp-img>
                <div class="caption">
                    <h2>Unique Flavors</h2>
                </div>
            </div>
            <div class="slide">
                <amp-img src="/img/amp/slide2.jpg"
                width="800"
                height="600"
                layout="responsive"></amp-img>
                <div class="caption">
                    <h2>Always Fresh</h2>
                </div>
            </div>

          </amp-carousel>
          <!--/carousel for mobile --> 
          <!--carousel for desktop --> 
   <amp-carousel width="2000"
              height="700"
              layout="responsive"
              type="slides"
              autoplay
              delay="5000"
              media="(min-width: 769px)">
              
              <div class="slide">
                    <amp-img src="/img/slide1.jpg"
                    width="2000"
                    height="700"
                    layout="responsive"></amp-img>
                    <div class="caption">
                        <h2>Unique Flavors</h2>
                    </div>
                </div>
            <div class="slide">
                    <amp-img src="/img/slide2.jpg"
                    width="2000"
                    height="700"
                    layout="responsive"></amp-img>
                    <div class="caption">
                        <h2>Always Fresh</h2>
                    </div>
            </div>
          </amp-carousel>
          <!--/carousel for desktop -->