.hs-logo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px; /* adds spacing between logos */
}

.hs-logo-grid__logo-wrapper {
  display: flex;
  flex: 0 1 160px; /* controls logo block size */
  align-items: center;
  justify-content: center;
}

.hs-logo-grid__link {
  display: block;
  width: 100%;
  text-align: center;
}

.hs-logo-grid__logo {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

/* optional but recommended */
.hs-logo-grid__link:hover .hs-logo-grid__logo {
  opacity: 0.7;
}

@media (max-width: 767px) {
  .hs-logo-grid__logo-wrapper {
    flex: 0 1 45%;
  }
}
{% for item in module.logos %}
  <div class="hs-logo-grid__logo-wrapper">
    <a href="" target="_blank" rel="noopener">
      <img src="" alt="" class="hs-logo-grid__logo">
    </a>
  </div>
.hs-logo-grid__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
{% endfor %}