Finder utilities

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

<!-- Accent background -->
<div class="bg-faded-accent">...</div>

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

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

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

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

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

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

// Primary faded background
.bg-faded-primary
  | ...

// Accent background
.bg-faded-accent
  | ...

// Secondary background
.bg-secondary
  | ...

// Info faded background
.bg-faded-info
  | ...

// Success faded background
.bg-faded-success
  | ...

// Warning faded background
.bg-faded-warning
  | ...

// Danger faded background
.bg-faded-danger
  | ...

// Dark faded background
.bg-faded-dark
  | ...

<!-- Gradient background -->
<div class="bg-gradient">...</div>

// Gradient background
.bg-gradient
  | ...

<!-- Primary overlay -->
<div class="position-relative bg-size-cover py-5" style="background-image: url(path-to-bg-image);">
  <span class="img-overlay bg-primary opacity-60"></span>
  <div class="content-overlay fw-bold text-white text-shadow text-center py-5">Primary overlay</div>
</div>

<!-- Success overlay -->
<div class="position-relative bg-size-cover py-5" style="background-image: url(path-to-bg-image);">
  <span class="img-overlay bg-success opacity-60"></span>
  <div class="content-overlay fw-bold text-white text-shadow text-center py-5">Success overlay</div>
</div>

<!-- Warning overlay -->
<div class="position-relative bg-size-cover py-5" style="background-image: url(path-to-bg-image);">
  <span class="img-overlay bg-warning opacity-60"></span>
  <div class="content-overlay fw-bold text-white text-shadow text-center py-5">Warning overlay</div>
</div>

<!-- Danger overlay -->
<div class="position-relative bg-size-cover py-5" style="background-image: url(path-to-bg-image);">
  <span class="img-overlay bg-danger opacity-60"></span>
  <div class="content-overlay fw-bold text-white text-shadow text-center py-5">Danger overlay</div>
</div>

<!-- Info overlay -->
<div class="position-relative bg-size-cover py-5" style="background-image: url(path-to-bg-image);">
  <span class="img-overlay bg-info opacity-60"></span>
  <div class="content-overlay fw-bold text-white text-shadow text-center py-5">Info overlay</div>
</div>

<!-- Dark overlay -->
<div class="position-relative bg-size-cover py-5" style="background-image: url(path-to-bg-image);">
  <span class="img-overlay bg-dark opacity-60"></span>
  <div class="content-overlay fw-bold text-white text-shadow text-center py-5">Dark overlay</div>
</div>

<!-- White overlay -->
<div class="position-relative bg-size-cover py-5" style="background-image: url(path-to-bg-image);">
  <span class="img-overlay bg-white opacity-60"></span>
  <div class="content-overlay fw-bold text-center py-5">White overlay</div>
</div>

<!-- Gradient overlay -->
<div class="position-relative bg-size-cover py-5" style="background-image: url(path-to-bg-image);">
  <span class="img-overlay bg-gradient opacity-60"></span>
  <div class="content-overlay fw-bold text-white text-shadow text-center py-5">Gradient overlay</div>
</div>

// Primary overlay
.position-relative.bg-size-cover.py-5(style="background-image: url(path-to-bg-image);")
  span.img-overlay.bg-primary.opacity-60
  .content-overlay.fw-bold.text-white.text-shadow.text-center.py-5 Primary overlay

// Success overlay
.position-relative.bg-size-cover.py-5(style="background-image: url(path-to-bg-image);")
  span.img-overlay.bg-success.opacity-60
  .content-overlay.fw-bold.text-white.text-shadow.text-center.py-5 Success overlay

// Warning overlay
.position-relative.bg-size-cover.py-5(style="background-image: url(path-to-bg-image);")
  span.img-overlay.bg-warning.opacity-60
  .content-overlay.fw-bold.text-white.text-shadow.text-center.py-5 Warning overlay

// Danger overlay
.position-relative.bg-size-cover.py-5(style="background-image: url(path-to-bg-image);")
  span.img-overlay.bg-danger.opacity-60
  .content-overlay.fw-bold.text-white.text-shadow.text-center.py-5 Danger overlay

// Info overlay
.position-relative.bg-size-cover.py-5(style="background-image: url(path-to-bg-image);")
  span.img-overlay.bg-info.opacity-60
  .content-overlay.fw-bold.text-white.text-shadow.text-center.py-5 Info overlay

// Dark overlay
.position-relative.bg-size-cover.py-5(style="background-image: url(path-to-bg-image);")
  span.img-overlay.bg-dark.opacity-60
  .content-overlay.fw-bold.text-white.text-shadow.text-center.py-5 Dark overlay

// White overlay
.position-relative.bg-size-cover.py-5(style="background-image: url(path-to-bg-image);")
  span.img-overlay.bg-white.opacity-60
  .content-overlay.fw-bold.text-center.py-5 White overlay

// Gradient overlay
.position-relative.bg-size-cover.py-5(style="background-image: url(path-to-bg-image);")
  span.img-overlay.bg-gradient.opacity-60
  .content-overlay.fw-bold.text-white.text-shadow.text-center.py-5 Gradient overlay

<!-- Opacity -->
<div class="opacity-10"></div>
<div class="opacity-15"></div>
<div class="opacity-25"></div>
<div class="opacity-35"></div>
<div class="opacity-40"></div>
<div class="opacity-50"></div>
<div class="opacity-60"></div>
<div class="opacity-65"></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>

// Opacity
.opacity-10
.opacity-15
.opacity-25
.opacity-35
.opacity-40
.opacity-50
.opacity-60
.opacity-65
.opacity-70
.opacity-75
.opacity-80
.opacity-90
.opacity-100

<!-- Text shadow -->
<h2 class="text-white text-shadow">Text shadow</h2>

// Text shadow
h2.text-white.text-shadow Text shadow

<!-- Opacity transition from 25% to 100% -->
<div class="opacity-25 opacity-transition">...</div>

<!-- Opacity transition from 50% to 100% -->
<div class="opacity-50 opacity-transition">...</div>

<!-- Opacity transition from 75% to 100% -->
<div class="opacity-75 opacity-transition">...</div>

// Opacity transition from 25% to 100%
.opacity-25.opacity-transition
  | ...

// Opacity transition from 50% to 100%
.opacity-50.opacity-transition
  | ...

// Opacity transition from 75% to 100%
.opacity-75.opacity-transition
  | ...