Text logo with subtext – responsive?

Hi guys,
I am building yet another site with Enfold! Yay, I like this theme.
I have exchanged the logo with a text logo with subtext, as described in your documentation.

//-------------------------------
// function - Text Logos
//-------------------------------
add_filter('avf_logo_final_output', 'avf_text_logo_final_output');

function avf_text_logo_final_output($logo) {
  $link     = apply_filters('avf_logo_link', home_url('/'));
  $logotext = "LOGO TEXT";
  $subtext  = "A CUSTOM SUBTEXT";
  $subtext  = "<span class='subtext'>$subtext</span>";
  $logo     = "<span class='logo'><h1><a href='".$link."'>".$logotext.$subtext."</a></h1></span>";

  return $logo;
}

and here is my tweaked CSS

/* Text logo styling */

#top .logo,
#top .logo a {  
  overflow: visible;
}

#top .logo {  
  background: none;
    display: flex;
    align-items: center;
    padding: 30px;
}
#top .logo .subtext {
    font-size: 18px;
    color: #808080;    
    position: absolute;
    width: 100%;
    left: 0;
    top: 30px;
}

/* Hide subtext on scroll */
#header.header-scrolled-full .subtext {
  display: none;
}

/*  Custom size logo  */

#top .logo ,
#top .logo a {  
  width: 500px;
 }

@media only screen and (max-width: 767px) {
#top .logo ,
#top .logo a {  
  max-width: 60% !important;
  width: 60% !important;
  height: auto;
 }}

When my screensize gets smaller, the size of the font is staying the same and the text gets mangeled into each other. How can I prevent this from happening?

Thank you.