@layer utilities {
  .gap {
    &-base {
      @apply gap-16;

      @screen md {
        @apply gap-24;
      }
    }
  }

  .my {
    &-base {
      @apply my-16;

      @screen sm {
        @apply my-24;
      }

      @screen md {
        @apply my-32;
      }

      @screen lg {
        @apply my-40;
      }
    }
  }

  .mb {
    &-base {
      @apply mb-16;

      @screen sm {
        @apply mb-24;
      }

      @screen md {
        @apply mb-32;
      }

      @screen lg {
        @apply mb-40;
      }
    }
  }

  .mt {
    &-base {
      @apply mt-16;

      @screen sm {
        @apply mt-24;
      }

      @screen md {
        @apply mt-32;
      }


      @screen lg {
        @apply mt-40;
      }
    }
  }

  .mx {
    &-base {
      @apply mx-16;

      @screen sm {
        @apply mx-24;
      }

      @screen md {
        @apply mx-32;
      }

      @screen lg {
        @apply mx-40;
      }
    }
  }

  .ml {
    &-base {
      @apply ml-16;

      @screen sm {
        @apply ml-24;
      }

      @screen md {
        @apply ml-32;
      }

      @screen lg {
        @apply ml-40;
      }
    }
  }

  .mr {
    &-base {
      @apply mr-16;

      @screen sm {
        @apply mr-24;
      }

      @screen md {
        @apply mr-32;
      }

      @screen lg {
        @apply mr-40;
      }
    }
  }
}