Bootstrap 5网格，如何自定义不同断点处的网格间隔(不使用实用程序类)？

<link href="path/to/bootstrap.min.css" rel="stylesheet">
<script src="path/to/bootstrap.min.js"></script>

<link href="path/to/style.css" rel="stylesheet">

/* 修改断点处的网格间隔 */
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .custom-gap-sm {
    margin: 1rem; /* 自定义网格间隔 */
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .custom-gap-md {
    margin: 1.5rem; /* 自定义网格间隔 */
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .custom-gap-lg {
    margin: 2rem; /* 自定义网格间隔 */
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .custom-gap-xl {
    margin: 2.5rem; /* 自定义网格间隔 */
  }
}

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 custom-gap-sm custom-gap-md custom-gap-lg custom-gap-xl">
      <!-- 内容 -->
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 custom-gap-sm custom-gap-md custom-gap-lg custom-gap-xl">
      <!-- 内容 -->
    </div>
    <!-- 更多列 -->
  </div>
</div>