My question is how to position these cards on my website?

<https://imgur.com/a/Ompfh>

It would be easy if there isn't this half circles above them.
I have tried to create parent class="cards" and class="card" for each of 3 cards.
In css:

```
.cards { display: flex } 
.card { width: 33.33% }

```

And set relative position to my background and absolute position to my half-circles but I want to do it without absolute and relative positions if it's possible.

```css
.cards {
  display: flex;
}

.card {
  width: 33.33%;
  color: #fff;
  text-align: center;
}

.card p {
  min-height: 80px;
  padding: 0 39px 0 39px;
}

.strategy--logo {
  position: absolute;
  top: 383px;
  left: 607px;
  width: 96px;
  height: 48px;
  background-color: #5a471b;
  border-top-right-radius: 48px;
  border-top-left-radius: 48px;
}

.strategy {
  margin-top: 135px;
  background-color: #5a471b;
}

.crop--marketing {
  margin-top: 135px;
  background-color: #9fa374;
}

.risk--mgmt {
  margin-top: 135px;
  background-color: #666;
}
```

```html
<div class="cards">
  <div class="card">
    <div class="strategy">
      <div class="strategy--logo">
        <img src="css/images/strategy-logo.png" alt="" />
      </div>
      <!-- /.strategy-/-logo -->

      <h2>

      </h2>

      <p>

      </p>
    </div>
    <!-- /.crop-/-marketing -->
  </div>
  <!-- /.card -->

  <div class="card">
    <div class="crop--marketing">
      <img src="css/images/crop-logo.png" alt="" />

      <h2>

      </h2>

      <p>

      </p>
    </div>
    <!-- /.crop-/-marketing -->
  </div>
  <!-- /.card -->

  <div class="card">
    <div class="risk--mgmt">
      <img src="css/images/arrow-logo.png" alt="" />

      <h2>

      </h2>

      <p>

      </p>
    </div>
    <!-- /.risk-/-mgmt -->
  </div>
  <!-- /.card -->
</div>
<!-- /.cards -->
```

Now I'm using absolute and relative but is there another way? Because when I resize my web browser the circles go away random ...