How to make the "Adaptive block of Yandex.Direct" adaptive?

Question

css

There is an instruction - https://yandex.ru/support/partner/products-direct/... I load the
banner asynchronously:

<!-- R-NNNNNN-NN Яндекс.RTB-блок  -->
<div id="yandex_ad_R-NNNNNN-NN"></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-NNNNNN-NN",
                renderTo: "yandex_ad_R-NNNNNN-NN",
                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>

I assign two fixed sizes to the container #yandex_ad_R-NNNNNN-NN through media queries (orientation: portrait) and (orientation: landscape):

@media screen and (orientation: landscape) {
    #yandex_ad_R-NNNNNN-NN {
        width: 480px;
        height: 134px;
    }
}

@media screen and (orientation: portrait) {
    #yandex_ad_R-NNNNNN-NN {
        width: 320px;
        height: 200px;
    }
}

The content of the banner adapts to the size of the container when the page is loaded, but does not react to changes in screen orientation.
From Google I got only official documentation (see the beginning of the post) and a discussion in the comments here - https://yandex.ru/blog/partner/19945/
Please tell me who came across. Thank you!

Answer 1

Set a variable with a directive code.
And call the variable on resize.