/* Integrations strip (#works-with). Prefix: ig- / .ig__ */

.ig {
  position: relative;
  padding-block: clamp(28px, 3.4vw, 52px) clamp(56px, 6vw, 96px);
}
.ig__inner {
  display: grid;
  justify-items: center;
  gap: clamp(22px, 2.6vw, 34px);
  text-align: center;
}
.ig__label {
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.3125rem);
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--page-ink);
  text-wrap: balance;
}

.ig__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  row-gap: 14px;
  max-width: 62rem;
}
.ig__name {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-inline: clamp(18px, 2.6vw, 38px);
  font-family: var(--font-display);
  font-weight: 650;
  font-size: clamp(1.3125rem, 1.15rem + .6vw, 1.6875rem);
  letter-spacing: -.025em;
  line-height: 1.2;
  color: var(--g-400);
  white-space: nowrap;
  transition: color var(--t-base) var(--ease-out);
}
.ig__name:hover { color: var(--g-700); }
:lang(ar) .ig__name { letter-spacing: 0; line-height: 1.5; }
/* Apple Pay stays in Latin in both languages, so give it the Latin rhythm. */
:lang(ar) .ig__name--pay { font-family: var(--font-display); letter-spacing: -.025em; }

/* A small dot between names (not after the last one in a row; good enough as a soft separator). */
.ig__name + .ig__name::before {
  content: "";
  position: absolute;
  inset-inline-start: -2.5px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-block-start: -2.5px;
  border-radius: 50%;
  background: var(--g-300);
}

@media (max-width: 599px) {
  .ig__list { max-width: 22rem; row-gap: 10px; }
  .ig__name { padding-inline: 14px; }
  .ig__name + .ig__name::before { display: none; }
}