Julian, that is an excellent question.  There are a couple of ways this can be done.  I don't have videos on either of them.

One way is to make an AJAX request that goes back to the database and brings up the new post.  That's the way modern JavaScript frameworks like Angular, React and Vue handle that sort of thing.  The downside of this is SEO.  Search engines only see the first content but none of the rest.

The second way is to load all of the data but only show the requested data using JavaScript.  This way Google sees all of the data.

I would take the second path. If you build out the HTML I would be glad to suggest CSS and JavaScript to make this work.  Here is how to do the HTML

1. In your custom html widget replace the <a tags with <button tags.  Give each button the data-topic attribute of the topic and the class "topic-selector".  For example
   

   <li><button class="topic-selector" data-topic="implants">Implants</button></li>

2. In the services_area section put all 7 of the posts.  Each post should have an ID that corresponds to the data-topic.  They should also all have a class name of "topic".
3. create a custom css definition for topic as below
   

   .topic{
        display:none;
   }

   do that last because in will hide all of those posts.  

4. Once you've done that let me know and I'll write you some JavaScript.

OK, this will be a little tough to explain.

The query box can't be split across 2 columns.  It has to wrap those columns.  What you need is a structure that looks something like:

<section id="implants"
      <query_box
            <left column
                  <left column content
            <right column
                  <right column content

The easiest way to do this is to create a responsive columns section for each of the 7 areas  rather than putting them all in the same section.  And use 7 query boxes, not 14

Julian, I would use 1 Easy Responsive Columns Section and one Featured Content Query Box per section. 

Put both columns inside the query box and then the content in the columns.

Also be sure to give the section an HTML id that corresponds to the data-topic 

No, that layout won't work.  We need to be able to have both the topic class and the id=topic on the same, outermost element.  If you look at my diagram above the outermost element - the <section - has the id, it also needs the class="topic"

The big idea here is to hide all of the structure (except for the default) until one of the buttons is pressed.  In your system part of the structure has to stay visible.  If it were possible to add ids to the query boxes then your structure would work.  Unfortunately it isn't.

FYI the class=topic must be on the same element as id=implants - AND no place else.  We are using class=topic to hide everything and id=implants to show individual sections.

The last thing to do is to add this to JavaScript section of the Front Page template

<script>
document.getElementById('implants').style.display = "block";

function reset(){
var hide = document.getElementsByClassName('topic');
var i;
for (i = 0; i < hide.length; i++) {
hide[i].style.display = "none";
}
}

var buttons = document.getElementsByClassName('topic-selector');
var index;
for (index = 0; index < buttons.length; index++){
buttons[index].onclick = function(){
var topic = this.dataset.topic;
reset();
document.getElementById(topic).style.display = "block";
};
}
</script>