services-multicolumn

Summary

Background-photo services band with a 638px-wide centered headline above three 36px-padded service cards. Each card hovers from white to graphite-on-white via CSS-variable swaps; a More Services CTA closes the section.

HTML structure (minimal)

<div class="multicolumn mt-100 section-padding">
  <div class="media media-bg">
    <img src="contact-bg.jpg" width="1920" height="883" />
  </div>
  <div class="container">
    <div class="multicolumn-header section-headings">
      <div class="subheading text-20 subheading-bg" data-aos="fade-up"><span>Our Services</span></div>
      <h2 class="heading text-50" data-aos="fade-up">Grow client base to boost business</h2>
    </div>
    <div class="multicolumn-inner">
      <div class="row">
        <div class="col-lg-4 col-12 multi-col" data-aos="fade-up">
          <a class="multicolumn-card" href="service-details.html">
            <div class="card-icon"><svg class="icon-40">…</svg></div>
            <h3 class="heading text-22">Strategy Planning</h3>
            <p class="text text-18">Service description…</p>
            <span class="card-arrow">→</span>
          </a>
        </div>
        <!-- two more multi-col cards -->
      </div>
    </div>
    <div class="section-headings text-center">
      <a href="services.html" class="button button--primary">More Services</a>
    </div>
  </div>
</div>

Key SCSS tokens

.multicolumn {
  position: relative;
  overflow: hidden;
}
.multicolumn-card {
  --color-background: rgba(255,255,255,1);
  padding: 36px;
  background-color: var(--color-background);
  border-radius: 10px;
  height: 100%;
  text-decoration: none;
  display: block;
  transition: 0.3s;
}
.multicolumn .multicolumn-card:hover {
  --color-background: rgba(32,40,45,1);
  --color-foreground: rgba(255,255,255,1);
  --color-foreground-heading: rgba(255,255,255,1);
}
.multicolumn .card-icon {
  --color-background: rgba(242,242,242,1);
  background: var(--color-background);
  border-radius: 100%;
  width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
}
.multi-col { margin-block-start: 60px; }

Notable details

• The hover dark-mode flip is achieved by rebinding three CSS custom properties on the card — children inherit and re-paint without any nested selector rules.
• .media-bg (the photographic backdrop) is absolutely positioned behind the cards via the parent's overflow: hidden rather than as a background-image, so it remains a real <img> for SEO and lazy-loading.
• .multi-col { margin-block-start: 60px } provides vertical breathing room when columns wrap on tablet, without media queries.

Use when

• Service grids with 3 cards where you want a hover-flip from light to dark without a duplicate dark theme stylesheet.
• Sections that should sit on top of a real photograph (not just a CSS background).
• Anywhere you want the card hover to feel like the card changes mode, not just its border.

Caveats

• The hover effect uses no transition on the custom properties themselves — the 0.3s on .multicolumn-card { transition: 0.3s } covers them indirectly. If you want fine-grained timing, switch to transition: background-color 0.3s, color 0.2s.
• The card-icon inverts via the same CSS variable trick; if you customize it heavily, double-check the --color-foreground cascade still reaches the SVG fill="currentColor".