@layer components {

  .heading {
    &-1 {
      @apply font-heading font-medium text-30-32 text-primary-main tracking-r003;

      @screen sm {
        @apply text-44-48 -tracking-r004;
      }

      @screen md {
        @apply text-52-56 -tracking-r005;
      }

      @screen lg {
        @apply text-60-64 -tracking-r006;
      }
    }

    &-2 {
      @apply font-heading font-bold text-20-24 text-primary-main tracking-r001;

      @screen sm {
        @apply text-24-32 -tracking-r0018;
      }

      @screen md {
        @apply text-28-32 -tracking-r0025;
      }

      @screen lg {
        @apply text-32-40 -tracking-r003;
      }
    }

    &-3 {
      @apply font-heading font-bold text-18-24 text-grey-700;

      @screen lg {
        @apply text-24-32;
      }
    }

    &-4 {
      @apply font-heading font-bold text-16-24 text-grey-700;
    }
  }
}