Cups & Balls

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<style>
  body {
    background: #1a4341;
    display: grid;
    grid-template-columns: auto auto auto auto;
    place-content: center;
    gap: 20px;
  }
  div {
    width: 50px;
    height: 50px;
    background: #dd6b4d;
    border-radius: 50%;
    background: #998235;
  }
  div:nth-child(2),
  div:nth-child(3) {
    border-radius: 50% 50% 0 0;
  }
  div:nth-child(5),
  div:nth-child(6) {
    border-radius: 0 0 50% 50%;
  }

  div:nth-of-type(even) {
    background: #f3ac3c;
  }
  div:nth-child(5) {
    order: 8;
  }
</style>