Using flex and flex-wrap with borders

Question

I can't find a good solution to make the red lines the same width, including the responsive views, when using flex wrappers around the tiles. Using a border obviously results in a perceived double width between the tiles. Any solutions?

PEN:

https://codepen.io/philipeachille/pen/LYRrxNQ

SCREENSHOT:

CSS & HTML:

section {
  border: 4px solid blue;
  padding: 30px
}

.flexy { 
  /* utility */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.advantages {
  background: blue;
}

.advantages__tile {
  min-width: 170px;
  max-width: 230px;
  padding: 25px;
  border: 4px solid red;
  background: white
}

.action {
  padding: 40px 0;
}

button {
  color: white;
  background: green;
  padding: 10px 60px;
  border: none
}

<!--Section THREE -->
<section>
  
  <div class="advantages flexy">
    <div class="advantages__row flexy">
      <div class="advantages__tile">
        <h2>Configurated</h2>
        <p>Etiam sagittis rutrum condimentum. Nulla vestibulum congue tellus, in hendrerit ligula porta eget.</p> 
      </div>
      <div class="advantages__tile">
        <h2>Managed</h2>
        <p>Phasellus turpis felis, laoreet non sodales vel, egestas eget augue. Morbi dapibus turpis nec magna tincidunt elementum.</p> 
     </div>
    </div>
    <div class="advantages__row flexy">
      <div class="advantages__tile">
        <h2>Audited</h2>
        <p>Pellentesque a arcu eu purus tincidunt luctus eget sed ex.</p>
      </div>
      <div class="advantages__tile">
        <h2>Featured</h2>
        <p>Sed arcu lectus, congue in enim vel, hendrerit semper est. Maecenas ac dictum lectus.</p>
      </div>
    </div>
  </div>
  
  <div class="action flexy">
    <button>Buy</button>
  </div>
  
</section>