/*
 * Client Logos
 * Logo grid showing trusted-by companies
 */

@layer components {
  .client-logos {
    text-align: center;
  }

  .client-logos__text {
    font-size: var(--text-normal);
    color: var(--color-gray-dark);
    margin-bottom: var(--block-space-double);
  }

  .client-logos__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--block-space-double);
    align-items: center;
    justify-items: center;
  }

  @media (min-width: 640px) {
    .client-logos__grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (min-width: 1280px) {
    .client-logos__grid {
      grid-template-columns: repeat(6, 1fr);
    }
  }

  .client-logos__item {
    display: inline-block;
    width: 5rem;
    background-color: currentColor;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    color: var(--color-gray-dark);
  }

  .client-logos__item--bytedance  { mask-image: url("/assets/logo-bytedance-6682923f.svg");  aspect-ratio: 1817 / 337; }
  .client-logos__item--bca       { mask-image: url("/assets/logo-bca-8f50f3f9.svg");        aspect-ratio: 1723 / 553; }
  .client-logos__item--xl-axiata { mask-image: url("/assets/logo-xl-axiata-0f0ae361.svg");  aspect-ratio: 1670 / 429; }
  .client-logos__item--clapham   { mask-image: url("/assets/logo-clapham-981cce2c.svg");    aspect-ratio: 1594 / 398; }
  .client-logos__item--kinobi    { mask-image: url("/assets/logo-kinobi-8cf941b2.svg");     aspect-ratio: 1353 / 315; }
  .client-logos__item--ajaib     { mask-image: url("/assets/logo-ajaib-256a76fe.svg");      aspect-ratio: 1649 / 502; }

  @media (min-width: 640px) {
    .client-logos__item {
      width: 6rem;
    }
  }
}