Why do the gutters between the columns not show?

Question

All of the focus and hover effects are correct and the items resize correctly at each breakpoint, but the gutters I put on the columns won't show.

I'm just confused on how to get space between each column.

#services {
  text-align: center;
  padding: 30px 0 50px;
}

.service {
  text-decoration: none;
  background: var(--primary-bg-color);
  color: var(--primary-txt-color);
  border: 5px solid var(--primary-bg-color);
  padding: 20px;
}

.service .fa-solid {
  display: block;
  height: 50px;
}

.service:hover,
.service:focus {
  background: var(--primary-txt-color);
  color: var(--primary-bg-color);
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<section id="services" aria-labelledby="servicesHdr">
  <h2 id="servicesHdr">We Offer the Complete Package</h2>
  <div class="container-xl">
    <div class="row g-4">
      <a href="#" class="service col-xl-2 col-lg-4 col-md-6 col-sm-12">
        <i class="fa-solid fa-diamond-turn-right fa-2x"></i> Tour Guides
      </a>
      <a href="#" class="service col-xl-2 col-lg-4 col-md-6 col-sm-12">
        <i class="fa-solid fa-user-group fa-2x"></i> Small Groups
      </a>
      <a href="#" class="service col-xl-2 col-lg-4 col-md-6 col-sm-12">
        <i class="fa-solid fa-plane fa-2x"></i> Air Travel
      </a>
      <a href="#" class="service col-xl-2 col-lg-4 col-md-6 col-sm-12">
        <i class="fa-solid fa-car fa-2x"></i> Car Rental
      </a>
      <a href="#" class="service col-xl-2 col-lg-4 col-md-6 col-sm-12">
        <i class="fa-solid fa-bed fa-2x"></i> Accommodations
      </a>
      <a href="#" class="service col-xl-2 col-lg-4 col-md-6 col-sm-12">
        <i class="fa-solid fa-child-reaching fa-2x"></i> Childcare
      </a>
    </div>
  </div>
</section>