How to make the responsive Yandex RTB block responsive?

Question

css

<style type="text/css">  
  @media screen and (max-width:500px) 
  {
    .yandex-adaptive {
      width:450px;
      height:150px;
      border:2px solid green; /*рамочка для тестирования, чтоб убедиться, 
что условие выполняется и стиль применяется*/
    }
  }    
</style>
...
<div align="center" style="width:100%;">     
  <!-- Yandex.RTB R-A-XXXXXX-1 -->
    <div id="yandex_rtb_R-A-XXXXXX-1" class="yandex-adaptive" style="text-align:center;"></div>
    <script type="text/javascript">
        (function(w, d, n, s, t) {
            w[n] = w[n] || [];
            w[n].push(function() {
                Ya.Context.AdvManager.render({
                    blockId: "R-A-XXXXXX-1",
                    renderTo: "yandex_rtb_R-A-XXXXXX-1",
                    horizontalAlign: false,
                    async: true
                });
            });
            t = d.getElementsByTagName("script")[0];
            s = d.createElement("script");
            s.type = "text/javascript";
            s.src = "//an.yandex.ru/system/context.js";
            s.async = true;
            t.parentNode.insertBefore(s, t);
        })(this, this.document, "yandexContextAsyncCallbacks");
    </script>
  <!-- Yandex.RTB R-A-XXXXXX-1 -->       
</div>

As a result, nothing adapts. On mobile, the ad goes beyond the block boundaries and stretches the entire page.

.