@layer utilities {
    .-translate-y-\[75\%\] {
        --tw-translate-y: calc(75% * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .top-\[75\%\] {
        top: 75%;
    }
    .-translate-y-\[95\%\] {
        --tw-translate-y: calc(95% * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .top-\[95\%\] {
        top: 95%;
    }
    .-rotate-45 {
        rotate: calc(45deg * -1);
    }
    .rotate-45 {
        rotate: 45deg;
    }
    .rotate-180 {
        rotate: 180deg;
    }
    .rounded-3xl {
        border-radius: var(--radius-3xl);
    }
    .left-1 {
        left: calc(var(--spacing) * 1);
    }
    .left-5 {
        left: calc(var(--spacing) * 5);
    }
    .left-6 {
        left: calc(var(--spacing) * 6);
    }
    .-left-1 {
        left: calc(var(--spacing) * -1);
    }
    .-left-9 {
        left: calc(var(--spacing) * -9);
    }
    .-left-px {
        left: -1px;
    }
    .-top-1 {
        top: calc(var(--spacing) * -1);
    }
    .-top-2 {
        top: calc(var(--spacing) * -2);
    }
    .-top-7 {
        top: calc(var(--spacing) * -7);
    }
  .sm\:right-6 {
    @media (width >= 640px) {
      right: calc(var(--spacing) * 6);
    }
  }
  .sm\:top-6 {
    @media (width >= 640px) {
      top: calc(var(--spacing) * 6);
    }
  }

    .hover\:text-gray-500 {
      &:hover {
        @media (hover: hover) {
        {
          color: var(--color-gray-500);
        }
        }
      }
    }

    .hover\:bg-gray-300 {
      &:hover {
        @media (hover: hover) {
        {
          background-color: var(--color-gray-300);
        }
        }
      }
    }



  .w-13 {
        width: calc(var(--spacing) * 13);
    }
    .w-14 {
        width: calc(var(--spacing) * 14);
    }
    .w-24 {
        width: calc(var(--spacing) * 24);
    }
    .w-32 {
        width: calc(var(--spacing) * 32);
    }
    .max-w-\[584px\] {
        max-width: 584px;
    }
    .max-w-\[600px\] {
        max-width: 600px;
    }
    .pt-1\.5 {
        padding-top: calc(var(--spacing) * 1.5);
    }
    .pt-2 {
        padding-top: calc(var(--spacing) * 2);
    }
    .pt-3 {
        padding-top: calc(var(--spacing) * 3);
    }
    .pt-6 {
        padding-top: calc(var(--spacing) * 6);
    }
    .pt-16 {
        padding-top: calc(var(--spacing) * 16);
    }
    .pl-10 {
        padding-left: calc(var(--spacing) * 10);
    }
    .p-10 {
        padding: calc(var(--spacing) * 10);
    }
}