Flexbox Code to Align Last Item Vertically Top to Bottom With Rest of Boxes in Row

I have a flexbox with 9 boxes on the first page of my website (https://www.veritaslegalassociates.com/). The last box is lower than the rest of the boxes in the row. How do I align the last box vertically top and bottom with the rest of the boxes in that row?

Here is the code I'm currently using:

<style>

.services-box
{
  display: flex;
  justify-content: center;
  align-items: end;
  flex-wrap: wrap;
}

.service
{
  margin: 20px;
}

.flip-box {
  background-color: transparent;
  width: 340px;
  height: 340px;
  border: 1px solid #f1f1f1;  
  border-radius: 10px;
  perspective: 1000px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.flip-box-front {
  background-color: #fff;
  color: black;
  border-radius: 10px;
}

.flip-box-front img
{
  height: 100%;
  width: 100%;
}

.flip-box-back {
  background-color: rgb(18,50,73);
  color: #000;
  transform: rotateY(180deg);
  border-radius: 0px;
}
  .flip-box-front h2 {
    position: absolute;
    bottom: 0;
    font-size: 24px;
    color: #fff;
  padding: 10px 15px;
}
.flip-box-back h2 {
    font-size: 18px;
    color: #fff;
  margin: 0px;
  padding: 0px 15px;
}
  .flip-box-back p {
    font-size: 16px;
    color: #fff;
  padding: 0px 15px;
}
  .flip-box-back a {
    text-decoration: none;
    font-size: 15px;
    color: #000;
    background-color: #fff;
    border-radius: 5px;
    padding: 10px 30px;
    font-weight: 700;
}
</style>

It looks fine to me. Can you describe in detail?