brands-grid

Summary

A static "Brands and Partners" strip with ten white SVG logos centered under a small mini-title caption. No animation; flexbox wraps logos with even gaps, sized by intrinsic SVG dimensions.

HTML structure (minimal)

<div class="section-brand flat-spacing">
  <div class="container">
    <h6 class="mini-title text-caption text-white-64 text-center">BRANDS AND PARTNERS</h6>
    <div class="brand-list">
      <a href="#" class="img-brand"><img src="assets/images/brand/brand-1.svg" alt="Brand"></a>
      <a href="#" class="img-brand"><img src="assets/images/brand/brand-2.svg" alt="Brand"></a>
      <!-- … 10 total -->
    </div>
  </div>
</div>

Key SCSS tokens

.section-brand {
  .brand-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding-top: 40px;

    .img-brand {
      flex: 0 0 auto;
      img {
        max-height: 48px;
        width: auto;
        opacity: 0.6;
        transition: opacity 0.3s ease;
      }
      &:hover img { opacity: 1; }
    }
  }
}

Notable details

• Logo SVGs are sized by their intrinsic width/height attributes rather than CSS, so wide marks (brand-2 125px) and square marks (brand-1 76px) coexist visually balanced.
• 60% baseline opacity reads as "muted" until hovered — a quiet detail that lets the content section dominate.

Use when

• Trust strips where logo widths vary and you don't want to force a uniform crop.
• Sections that need a calm pause between two animated blocks (it sits between Tech Stack and Award).

Caveats

• Static markup; logos are not links to anything by default (href="#").
• flex-wrap: wrap means rows can break unevenly on narrow widths — verify on tablets.