/* ==========================================================================
   Icon list (used by "The Euro Pros Difference" and reused site-wide
   for coordinate/what-we-do lists)
   ========================================================================== */

.icon-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg) var(--space-xl);
}

.icon-list--4 {
  grid-template-columns: repeat(4, 1fr);
}

.icon-list--5 {
  grid-template-columns: repeat(5, 1fr);
}

.icon-list--center {
  text-align: center;
}

.icon-list--center .icon-list__item {
  flex-direction: column;
  align-items: center;
}

.icon-list__item {
  display: flex;
  gap: var(--space-sm);
}

.icon-list__icon {
  flex: none;
  width: 40px;
  height: 40px;
  color: var(--color-navy-800);
}

.icon-list__icon--light {
  color: var(--color-white);
}

.icon-list__title {
  font-weight: 700;
  color: var(--color-navy-800);
  margin-bottom: 2px;
}

.icon-list--light .icon-list__title {
  color: var(--color-white);
}

.icon-list__text {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

.icon-list--light .icon-list__text {
  color: var(--color-text-on-dark-muted);
}

@media (max-width: 900px) {
  .icon-list--4,
  .icon-list--5 {
    grid-template-columns: repeat(2, 1fr);
  }
}