@layer components {
  @keyframes infinityScroll {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(calc(-100% - var(--gap)));
    }
  }

  .logos {
    --gap: theme(spacing.24);

    @screen xxl {
      --gap: theme(spacing.20);
    }

    @screen md {
      --gap: theme(spacing.14);
    }

    @apply flex w-full overflow-hidden;

    gap: var(--gap);
  }

  .logos-content {
    @apply flex will-change-transform;

    gap: var(--gap);
    animation: infinityScroll 45s linear infinite;
  }

  .logos-central-mask {
    mask-image: radial-gradient(350px at 50% -200px, black 25%, transparent 100%);

    @screen md {
      mask-image: radial-gradient(200px at 50% -100px, black 25%, transparent 100%);
    }
  }

  .logos-sides-fade {
    @apply relative before:absolute before:bottom-0 before:left-0 before:top-0 before:z-10 before:w-[100px] before:bg-gradient-to-r before:from-black before:to-transparent after:absolute after:bottom-0 after:right-0 after:top-0 after:z-10 after:w-[100px] after:bg-gradient-to-l after:from-black after:to-transparent;
  }
}
