将网格中的最后一个元素居中

Question

我试图使最后一个元素集中在较小的设备上，但无法使其正常工作。

我尝试将其扩展为2个元素，但是没有运气。可能是这样，但是只是我不能在之后的中间做到这一点！

我认为这张图片可以更好地说明这一点：

Top Rated Seller应该在中间！

.discover {
  width: 100%;
  height: 100%;
  text-align: center;
}

.discover h1 {
  text-transform: capitalize;
  color: var(--text-primary);
  font-size: 30px;
  font-weight: bold;
}

.discover-content {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 3rem 0;
}

.element i {
  color: var(--text-primary);
  font-size: 2rem;
}

.element p {
  color: var(--text-primary);
  text-transform: capitalize;
  font-weight: bold;
  padding: 0 1rem;
}

@media screen and (max-width: 980px) {
  .discover-content {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-gap: 20px;
  }
  .element:last-child {
    grid-row: span 2 / auto;
  }
}

<section class="discover">
  <div class="wrapper">
    <h1>our service</h1>
    <div class="discover-content">
      <div class="element">
        <i class="fas fa-undo"></i>
        <p>30-day guarantee</p>
      </div>
      <div class="element">
        <i class="fas fa-truck"></i>
        <p>fast delivery</p>
      </div>
      <div class="element">
        <i class="far fa-compass"></i>
        <p>world-wide shipping</p>
      </div>
      <div class="element">
        <i class="fas fa-tshirt"></i>
        <p>high quality garments</p>
      </div>
      <div class="element">
        <i class="far fa-star"></i>
        <p>top rated sellers</p>
      </div>
    </div>
  </div>
</section>

谢谢！