and in addition – some magic of “container-type” property and font-size adjust via cqi
to have more legible font sizes!

@media only screen and (max-width: 989px){
  #top .gridded-flipbox .avia-icongrid-flipback  .avia-icongrid-inner {
    padding: 20px !important;
  }

  #top .gridded-flipbox .avia-icongrid-flipback {
    container-type: inline-size;
  }

  #top .gridded-flipbox .avia-icongrid-flipback p {
    hyphens: auto;
    font-size: 9cqi;
    line-height: 1.5em
  }
}

btw: using variable fonts can be very interesting – but there are a lot of new css declarations to know – see here a playground:
https://variablefonts.io/about-variable-fonts/

Wenn du also doch lieber mit einem selbstgehosteten OpenSans arbeiten möchtest. Dann sag bescheid – welche Schriftschnitte du brauchst, dann lade ich das file auch hoch.

PPS: übrigens OpenSans ist ja noch harmlos, RobotoFlex ist ein Super Variabler Font mit mehreren Axen die bedient werden können:

Firefox (Developer Version) hat für Schriftarten einen eigenen Reiter, an dem man herumspielen kann mit diesen Einstellungen. Wenn man dann mit dem Resultat zufrieden ist, geht man zurück zum Regelsatz, und kann sich das als css heraus kopieren:
(das Element für das du dann rumgespielt hast, muss dann noch durch den eigentlichen Selektor ersetzt werden)

Element {
  font-size: 140px;
  line-height: 1.1em;
  letter-spacing: 5px;
  font-weight: 612;
  font-stretch: 113%;
  font-variation-settings: "opsz" 8, "GRAD" 87;
  font-style: oblique 7.45deg;
}

btw. i optimized those rules a little – and you do not need to shrink the menu items font-size – because it breaks to burger menu earlier.

So : better remove all the code from above – and insert instead:

#top #header .av-main-nav > li > a {
  font-size: 16px !important;
  padding: 0 12px !important;
}

@media only screen and (min-width: 1430px) {
  #header #header_main {
    width: 1430px;
    margin: 0 auto;
  }
}

@media only screen and (min-width: 990px) {
  #header #header_main {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }
  #header #header_main > * {
    flex: 1 1 auto;
    align-self: center;
    width: unset;
  }
  #header #header_main .av-logo-container {
    flex-basis: calc(100% - 170px);
    flex-grow: 1;
    order: 1;
    max-width: unset;
  }
  #header #header_main .widget {
    margin-right: 50px;
    flex-grow: 0;
    flex-basis: 120px !important;
    order: 2;
    display: flex;
    justify-content: center;
  }
  #header #header_main #header_main_alternate {
    flex-basis: 100%;
    order: 3;
    border-top: none;
  }
}

@media only screen and (max-width: 989px) {
  #header #header_main {
    display: flex;
    flex-flow: wrap column-reverse;
  }
  #header #header_main .widget {
    margin-top: 0px;
    padding: 10px 0 !important;
  }
   #header_main .av-logo-container {
    height: 150px !important;
  }
  #header_main .inner-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 150px;
  }
  #header_main .inner-container > * {
    align-self: center;
  }

  #header_main .inner-container .main_menu {
    display: flex !important;
    align-items: center;
  }
  #header_main .inner-container .avia-standard-logo {
    width: 215px
  }
  #header_main .inner-container .main_menu .social_bookmarks  {
    top: 0;
    margin-top: 0 !important;
  }
}

@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all .main_menu {
    position: relative !important;
  }
}

All you need is to get rid of the min-height option – the fullwidth slider is a responsive slider !

for the caption it might be neccessary to have for very small screens smaller font-sizes – or to set a part (f.e. the avia-caption-content to display:none )

you got a rule :

@media only screen and (max-width: 489px) {
  .avia-slideshow li img {
    width: 100%;
    background-size: cover;
    height: 200px;
    object-fit: cover;
    left: 30px !important;
    position: relative;
    overflow: visible;
  }
}

Remove the rules given to you by ismael first because …

remove the left position – and height – otherwise you will have a gray bar on the left ;)

then there are some min-height properties:

inline-styles

@media only screen and (max-width: 489px) {
  .home #full_slider_1, .home #full_slider_1 .avia-slideshow, 
  .home #full_slider_1 .avia-slideshow-inner, .home #full_slider_1 .avia-slide-wrap {
    min-height: 200px;
    height: 200px !important;
  }
}

and enfold css:

@media only screen and (max-width: 479px) {
  .home #full_slider_1, 
  .home #full_slider_1 .avia-slideshow, 
  .home #full_slider_1 .avia-slideshow-inner, 
  .home #full_slider_1 .avia-slide-wrap {
    min-height: 300px;
  }
}

don’t know where they come from. But if you like to see the full width of the image – these settings are suboptimal.

the code snippet will work on your page for all images. Even on that graphics page.
But if you create these images in a different way – and i see some Enfold Lightbox on paintings page we had to find then a different solution.
But if you use the same way like on mixed media and graphics page – the code will work there too.

But as mentioned – it would be nice to have a fallback for the bottom-bar title on lightbox. my advise – and not only for seo purpose – give an alt tag to your images via media library.

and use that snippet with fallback alt -tag as title inside bottom-bar:

Edit
this checks if original image is present and if widget-text or alt is present :

function mixed_media_lightbox() {
?>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () { 
(function($){
    $('.widget_media_image').magnificPopup({
      delegate: 'img',
      type: 'image',
      removalDelay: 500,  // to allow animated closing in ms
      mainClass: 'avia-popup mfp-zoom-in mfp-image-loaded mixed-media',  
      midClick: true,
      gallery: { 
        enabled:true,
        preload: [1, 1] ,
      },
      image: {
        titleSrc: false,
        markup: '<div class="mfp-figure">'+
                  '<div class="mfp-close"></div>'+
                  '<div class="mfp-img"></div>'+
                    '<div class="mfp-bottom-bar">'+
                      '<div class="mfp-title"></div>'+
                  //  '<div class="mfp-counter"></div>'+
                    '</div>'+
                '</div>',
        },  
        callbacks: {
          elementParse: function(item) {
            var originalSrc = item.el.attr('src');
            var fullSizeSrc = originalSrc.replace(/-\d+x\d+\./, '.');

            // Create a temporary image object to check whether the full resolution exists
            var img = new Image();
            img.onload = function() {
              item.src = fullSizeSrc;
            };
            img.onerror = function() {
              item.src = originalSrc;
            };
            img.src = fullSizeSrc;
            item.src = originalSrc;
          },

          markupParse: function (template, values, item) {
            var title = ''; // Initialize title as an empty string. This is our default fallback.

            // 1. Highest Priority: Check for content from a nearby .widget_text element
            var textWidget = item.el.closest('.panel-grid-cell').find('.widget_text');
            if (textWidget.length && textWidget.html().trim() !== '') {
              title = textWidget.html();
            } else {
              // 2. Second Priority: If no text widget, check the image's alt attribute
              var altAttribute = item.el.attr('alt');
              if (altAttribute && altAttribute.trim() !== '') { // Checks if exists AND has non-empty content
                title = altAttribute;
              } else {
                // 3. Third Priority: If no alt, check the image's title attribute
                var titleAttribute = item.el.attr('title');
                if (titleAttribute && titleAttribute.trim() !== '') { // Checks if exists AND has non-empty content
                  title = titleAttribute;
                }
              }
            }

            // Finally, assign the title to values.title, wrapping it in <h3> ONLY if there's content
            if (title) {
              values.title = '<h3 class="heading">' + title + '</h3>';
            } else {
              values.title = ''; // If no title was found at all, ensure nothing is displayed
            }
          },
        },
    });
})(jQuery);
});
</script>
<?php
}
add_action('wp_footer', 'mixed_media_lightbox', 9999);

And

#top .mixed-media .mfp-image-holder .mfp-content {
  max-width: 1200px; 
  box-sizing: border-box; 
  padding-bottom: 90px; 
  vertical-align: middle; 
}

#top .mixed-media .mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
  background-color: rgba(0,0,0,0.3);
  backdrop-filter: blur(4px);
  padding: 5px 10px;
}

#top .mixed-media .mfp-bottom-bar .mfp-counter {
  right: 5px
}

#top .mixed-media .mfp-content img.mfp-img {
  width: auto;
  max-width: 100%;
  max-height: 90vh !important;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

#top .mixed-media .mfp-content .mfp-title .heading * {
  font-weight: 400 !important;
}

#top .mixed-media .mfp-content .mfp-title .heading p {
  margin: 0.3em 0;
}

#top .widget_media_image img {
  cursor: pointer;
}

.flatpickr-current-month {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 2px;
height: 50px;
}

/* Dropdown tháng */
/* Giảm độ rộng box tháng */
.flatpickr-monthDropdown-months {
width: 70px; /* Giảm từ mặc định xuống, bạn có thể thử 80px hoặc 90px nếu cần */
font-size: 12px;
height: 32px;
padding: 4px 8px;
border-radius: 4px;
border: 1px solid #ccc;
box-sizing: border-box;
line-height: 1;
}

/* Bọc input năm */
.flatpickr-current-month .numInputWrapper {
width: 70px; /* Đủ để hiển thị 4 chữ số */
height: 50px;
overflow: hidden;
position: static;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}

/* Input năm */
.flatpickr-current-month .numInputWrapper input.cur-year {
width: 70%;
height: 100%;
font-size: 14px;
border: none;
text-align: center;
padding: 50;
box-sizing: border-box;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
background: #eee;
border-radius: 4px;
}
I used this code above , but it show not good, do you have help me to it look good?