Around utilities

<!-- Primary faded background -->
<div class="bg-primary bg-opacity-10">...</div>

<!-- Secondary background -->
<div class="bg-secondary">...</div>

<!-- Success faded background -->
<div class="bg-success bg-opacity-10">...</div>

<!-- Danger faded background -->
<div class="bg-danger bg-opacity-10">...</div>

<!-- Warning faded background -->
<div class="bg-warning bg-opacity-10">...</div>

<!-- Info faded background -->
<div class="bg-info bg-opacity-10">...</div>

<!-- Dark faded background -->
<div class="bg-dark bg-opacity-10">...</div>

<!-- Primary overlay -->
<div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url(assets/img/landing/corporate/features/03.jpg);">
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-primary opacity-70"></span>
  <div class="position-relative fs-lg fw-semibold text-white text-center z-5 py-5">
    Primary overlay
  </div>
</div>

<!-- Success overlay -->
<div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url(assets/img/landing/corporate/features/03.jpg);">
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-success opacity-70"></span>
  <div class="position-relative fs-lg fw-semibold text-white text-center z-5 py-5">
    Success overlay
  </div>
</div>

<!-- Danger overlay -->
<div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url(assets/img/landing/corporate/features/03.jpg);">
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-danger opacity-70"></span>
  <div class="position-relative fs-lg fw-semibold text-white text-center z-5 py-5">
    Danger overlay
  </div>
</div>

<!-- Warning overlay -->
<div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url(assets/img/landing/corporate/features/03.jpg);">
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-warning opacity-70"></span>
  <div class="position-relative fs-lg fw-semibold text-white text-center z-5 py-5">
    Warning overlay
  </div>
</div>

<!-- Info overlay -->
<div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url(assets/img/landing/corporate/features/03.jpg);">
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-info opacity-70"></span>
  <div class="position-relative fs-lg fw-semibold text-white text-center z-5 py-5">
    Info overlay
  </div>
</div>

<!-- Dark overlay -->
<div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url(assets/img/landing/corporate/features/03.jpg);">
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-60"></span>
  <div class="position-relative fs-lg fw-semibold text-white text-center z-5 py-5">
    Dark overlay
  </div>
</div>

<!-- Gradient text -->
<h2 class="display-4">
  <span class="text-gradient">I'm a gradient text</span>
</h2>

<!-- Opacity -->
<div class="opacity-0">...</div>
<div class="opacity-10">...</div>
<div class="opacity-20">...</div>
<div class="opacity-25">...</div>
<div class="opacity-30">...</div>
<div class="opacity-40">...</div>
<div class="opacity-50">...</div>
<div class="opacity-60">...</div>
<div class="opacity-70">...</div>
<div class="opacity-75">...</div>
<div class="opacity-80">...</div>
<div class="opacity-90">...</div>
<div class="opacity-100">...</div>