Grid row not 100% responsiv

Hi,

I have a grid row with 3 Media Elements and text above.
On mobile devices
– the first image is moved to the second cell
– the second image is moved to the third cell
– and the third image is moved to a second row in the third cell
the text shrank only a bit and is now partly readable (I got a quick css for the text size from one of you – see below)

I also tried to insert the image into the grid cell – but than I don’t get the images at all in the mobile device preview

here is the link https://www.sbot.co.at/#bereiche

sorry I have to paste all used quick css as I don’t know which one is the right

#top .aviaccordion-preview-title-wrap {
background: transparent;
}

/* Title and excerpt color */
#top .aviaccordion-excerpt,
#top .aviaccordion-preview-title h3 {
color:#ffffff;
}

#top .grid-content h3{
font-size: 22px;
text-align: center;
font-family: sans-serif;
}

.isotope_activated .isotope-item {
padding: 10px;
}

.aviaccordion-title {
position: absolute;
bottom: 0;
}

.av-image-caption-overlay-center {
display: block;
text-align: center;
position: absolute;
bottom: 20px;
}

#bottom .gridrow {
border: none;
}

#after_submenu_1 {
border-color:transparent !important;
}

.av-image-caption-overlay-center {
width:100%;
}

span.av-milestone-indicator {
display:none !important;
}

#after_section_1, #after_section_2, #after_section_3, #after_section_4, #after_section_5, #after_section_6 {
border: none;
}

.header-scrolled #avia-menu li a .avia-menu-text {
color:#000 !important;
}

#top #header .av-main-nav > li > a .avia-menu-text {
color: #000 !important;
}
.html_header_glassy #top #header .av-main-nav > li > a .avia-menu-text {
color: #fff !important;
}
.html_header_glassy #top #header.header-scrolled .av-main-nav > li > a .avia-menu-text {
color: #000 !important;
}

.av-tab-section-image {
height: 120px !important;
width: 120px !important;
margin-left: auto;
margin-right: auto;
}

.av-tab-section-tab-title-container {
background-color: #ffffff;
}

.av-inner-tab-title {
width: 80px !important;
font-size: 16px !important;
font-weight: bold !important;
}

/* Sticky header on mobile */
@media only screen and (max-width: 767px) {
.responsive #top #main {
/* Margin top value should be equal to header height*/
margin-top: 180px;
}
.responsive #top #wrap_all #header {
position: fixed;
}
}