Problem with flexbox. How to add new div in row? – Html

I have another problem with positioning. Like you can see in the "desc" section i have a problem with those elements. They are not in the same position and my next problem is with positioning the squares. The first element is positioned correctly, we can see a gap between the first element and the second element but between the second and third element we don't have a gap. The second and third description sections don't match their corresponding squares evenly. I pointed this out on the image. What could be the problem?

Another issue I have is with the size of the gaps between the title and the description in the first and third squares even though there is no gap in the middle square. Another problem is that the descriptions move around in uneven ways when I change their font size.

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" rel="stylesheet" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<style type="text/css">


.box {
    display: flex;
    flex-direction: column;
    align-items: center;  
    }

.main_txt{
 margin-top: 0px;
 text-align: center;
 text-shadow: 3px 3px 3px #a9a9a9;
 font-size: 40px;
}
.main_txt  h3
{
 margin-top: -8px;
 margin-bottom: -2px;
 font-weight: 400;
}

.font{
  margin-top: 10px;
  display: flex;
  flex-flow: row nowrap;
}

.square{
  border-radius: 25px;
  flex: 1;
  display: flex;
  width: 360px;
  height: 222px;
  background-color:#ab2e12;
  margin: 10px;
  font-size:0;
  text-align: center;
}

.material-symbols-outlined {
  align-items:center;
  justify-content: center;
  color: white;
  font-size: 200px;
    flex: 1;
  display: flex;
}

.title{
flex:1;
display: flex;
font-size: 25px;
font-weight:700;
}

.desc{
  flex:1;
  display:flex;
  align-items: flex-start;
  padding-top: 10px;
  border-top: 3px solid #ab2e12;
   border-bottom: 3px solid #ab2e12;
  font-size: 20px;
  }

.box2 {
    display: flex;
    flex-direction: column;
    align-items: center;  
    }

.about_us{

  display:felx;
  flex:1;
  font-size:20px;
  margin-top: 10px; 
  text-align: justify;
}

.about_us_title{
  display:felx;
  flex:1;
  font-weight: 700;
  font-size:30px;
  margin-top: 20px; 
}

@media (max-width: 800px) {
  .font, .title {
    flex-direction: column;
  }
}
</style>
<div class="main_txt"><h3>Centrum Zarządzania <strong>Nieruchomościami</strong></h3></div>
<div class="font">

  <div class="box">
    <div class="square">
      <span class="material-symbols-outlined">attach_money</span>
    </div>
    <div class="title">Brak prowizji</div>
    <div class="desc">Nie pobieramy od Państwa żadnych prowizji</div>
  </div>


  <div class="box">
    <div class="square">
      <span class="material-symbols-outlined">campaign</span>
    </div>
    <div class="title">Kampania reklamowa</div>
    <div class="desc">Zajmujemy się profesjonalną kampanią reklamową. Zapraszamy do skorzystania z naszej darmowej miesięcznej kampani reklamowaj.</div>
  </div>

  <div class="box">
    <div class="square">
      <span class="material-symbols-outlined">handshake</span>
    </div>
    <div class="title">Brak pośrednictwa</div>
    <div class="desc"> Nie pośredniczmy podczas pokazywania czy tudież sprzedaży nieruchomości. Umawiają oraz spotykają się Państwo indywidualnie.</div>
  </div>

  <div class="box">
    
  </div>
</div>
<div class="box2">
<div class="about_us_title"> O naszej firmie</div>
<div class="about_us">Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus PageMaker</div>
</div>