Blog Grid is not responsive

have a look to this post:
https://kriesi.at/support/topic/dynamically-change-number-of-columns-in-post-slider/#post-1377717

this is similar for your blog

to stay specific only to this page ( your blog page ) we can try to set the conditional tag is_archive
(if it does not work with this conditional we had to find a better conditional)
this to your child-theme functions.php:

function wrap_articles_in_one_flex_container(){ 
if(is_archive()){
?>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () { 
  (function($) {
    $('.avia-content-slider-inner .slide-entry-wrap .slide-entry').each( function() {
        $(this).detach().appendTo('.avia-content-slider-inner .slide-entry-wrap:first');
    });
    $('.avia-content-slider-inner .slide-entry-wrap:empty').remove();
  })(jQuery);
});
</script>
<?php
}
}
add_action('wp_footer', 'wrap_articles_in_one_flex_container');

this collects all articles into one wrapper – only this way it is possible that the whole container can react responsively.
now the css to quick css:

#top.category-blog .avia-content-slider .slide-entry-wrap {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

#top.category-blog .avia-content-slider .slide-entry-wrap .slide-entry {
  flex: 0 1 calc(33% - 30px);
  margin: 0 15px 30px;
  width: unset;
  max-width: unset;
}

@media only screen and (max-width:989px) {
  #top.category-blog .avia-content-slider .slide-entry-wrap .slide-entry {
    flex: 0 1 calc(50% - 10px);
    margin: 0 0 30px !important;
  }
}

@media only screen and (max-width:767px) {
  #top.category-blog .avia-content-slider .slide-entry-wrap .slide-entry {
    flex: 1 1 100%;
    margin: 0 0 30px !important;
  }
}

But you had to switch off the pagination