@layer components {
  .card-gradient {
    background: radial-gradient(
        58.83% 95.12% at 62.37% 97.91%,
        rgba(238, 203, 255, 0.59) 0%,
        rgba(255, 255, 255, 0) 100%
      ),
      linear-gradient(
        155deg,
        rgba(50, 107, 255, 0.8) 68.16%,
        rgba(194, 226, 255, 0.8) 94.33%
      );

    backdrop-filter: blur(7.174633026123047px);
  }

  .card-link-bg {
    background: linear-gradient(180deg, #fafafa 0%, #ededed 100%);
    box-shadow:
      0px 4px 12px 0px rgba(0, 0, 0, 0.12),
      0px -1px 1px 0px rgba(0, 0, 0, 0.1) inset,
      0px 1px 1px 0px #fff inset;
  }

  .card-link-bg-dark {
    background: var(--color-bg-elevated, #27272a);
    box-shadow:
      0px 4px 12px 0px rgba(0, 0, 0, 0.12),
      0px -1px 1px 0px rgba(0, 0, 0, 0.1) inset,
      0px 1px 1px 0px #4c4c4c inset;
  }

  .card-wrapper {
    border-radius: 16px;
    background: linear-gradient(180deg, #fafafa 0%, #ededed 100%);
    box-shadow:
      0px 4px 12px 0px rgba(0, 0, 0, 0.12),
      0px -1px 1px 0px rgba(0, 0, 0, 0.1) inset,
      0px 1px 1px 0px #fff inset;
  }

  .card-wrapper-dark {
    border-radius: 12px;
    background: var(
      --Linear-dark,
      linear-gradient(
        268deg,
        rgba(117, 117, 117, 0.38) 0%,
        rgba(121, 119, 128, 0.33) 100%
      )
    );
    box-shadow:
      0px 4px 12px 0px rgba(0, 0, 0, 0.12),
      0px -1px 1px 0px rgba(0, 0, 0, 0.1) inset,
      0px 0.2px 1px 0px #fff inset;
  }

  .card {
    @apply rounded-xl border bg-gray-50 border-gray-50 dark:border-[#202231] dark:bg-[#111217]/50;

    &-link {
      display: inline-flex;
      padding: 8px 16px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 8px;
      border-radius: 16px;
      font-size: 14px;
      cursor: pointer;
    }
  }
}