@layer utilities {
  .layout__wrapper {
    --_sp-sm: var(--sp-2);
    --_sp-md: var(--sp-4);
    --_sp-lg: var(--sp-6);
    --_sp-xl: var(--sp-8);
    --_sp-xxl: var(--sp-10);
  }

    @media (min-width: 420.02px) {
  .layout__wrapper {
      --_sp-sm: var(--sp-4);
      --_sp-md: var(--sp-6);
      --_sp-lg: var(--sp-8);
      --_sp-xl: var(--sp-10);
      --_sp-xxl: var(--sp-12);
  }
    }

    @media (min-width: 1024.02px) {
  .layout__wrapper {
      --_sp-sm: var(--sp-6);
      --_sp-md: var(--sp-8);
      --_sp-lg: var(--sp-10);
      --_sp-xl: var(--sp-12);
      --_sp-xxl: var(--sp-14);
  }
    }

    @media (min-width: 1280.02px) {
  .layout__wrapper {
      --_sp-sm: var(--sp-8);
      --_sp-md: var(--sp-10);
      --_sp-lg: var(--sp-12);
      --_sp-xl: var(--sp-14);
      --_sp-xxl: var(--sp-16);
  }
    }

  /*!***********************
  *****       GAP       ****
  *************************/

  .gap-x-0 {
    -moz-column-gap: 0;
         column-gap: 0;
  }

  .gap-x-1 {
    -moz-column-gap: var(--sp-1);
         column-gap: var(--sp-1);
  }

  .gap-x-2 {
    -moz-column-gap: var(--sp-2);
         column-gap: var(--sp-2);
  }

  .gap-x-3 {
    -moz-column-gap: var(--sp-3);
         column-gap: var(--sp-3);
  }

  .gap-x-4 {
    -moz-column-gap: var(--sp-4);
         column-gap: var(--sp-4);
  }

  .gap-x-sm {
    -moz-column-gap: var(--_sp-sm);
         column-gap: var(--_sp-sm);
  }

  .gap-x-md {
    -moz-column-gap: var(--_sp-md);
         column-gap: var(--_sp-md);
  }

  .gap-x-lg {
    -moz-column-gap: var(--_sp-lg);
         column-gap: var(--_sp-lg);
  }

  .gap-x-xl {
    -moz-column-gap: var(--_sp-xl);
         column-gap: var(--_sp-xl);
  }

  .gap-x-xxl {
    -moz-column-gap: var(--_sp-xxl);
         column-gap: var(--_sp-xxl);
  }

  /*! * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

  .gap-y-0 {
    row-gap: 0;
  }

  .gap-y-1 {
    row-gap: var(--sp-1);
  }

  .gap-y-2 {
    row-gap: var(--sp-2);
  }

  .gap-y-3 {
    row-gap: var(--sp-3);
  }

  .gap-y-4 {
    row-gap: var(--sp-4);
  }

  .gap-y-sm {
    row-gap: var(--_sp-sm);
  }

  .gap-y-md {
    row-gap: var(--_sp-md);
  }

  .gap-y-lg {
    row-gap: var(--_sp-lg);
  }

  .gap-y-xl {
    row-gap: var(--_sp-xl);
  }

  .gap-y-xxl {
    row-gap: var(--_sp-xxl);
  }

  /*!***********************
  *****     MARGINS     ****
  *************************/

  .m-0 {
    margin: 0;
  }

  .m-sm {
    margin: var(--_sp-sm);
  }

  .m-md {
    margin: var(--_sp-md);
  }

  .m-lg {
    margin: var(--_sp-lg);
  }

  .m-xl {
    margin: var(--_sp-xl);
  }

  .m-xxl {
    margin: var(--_sp-xxl);
  }

  /*! * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

  .mx-0 {
    margin-block: 0;
  }

  .mx-sm {
    margin-block: var(--_sp-sm);
  }

  .mx-md {
    margin-block: var(--_sp-md);
  }

  .mx-lg {
    margin-block: var(--_sp-lg);
  }

  .mx-xl {
    margin-block: var(--_sp-xl);
  }

  .mx-xxl {
    margin-block: var(--_sp-xxl);
  }

  /*! * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

  .my-0 {
    margin-block: 0;
  }

  .my-sm {
    margin-block: var(--_sp-sm);
  }

  .my-md {
    margin-block: var(--_sp-md);
  }

  .my-lg {
    margin-block: var(--_sp-lg);
  }

  .my-xl {
    margin-block: var(--_sp-xl);
  }

  .my-xxl {
    margin-block: var(--_sp-xxl);
  }

  /*! * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

  .mt-0 {
    margin-top: 0;
  }

  .mt-sm {
    margin-top: var(--_sp-sm);
  }

  .mt-md {
    margin-top: var(--_sp-md);
  }

  .mt-lg {
    margin-top: var(--_sp-lg);
  }

  .mt-xl {
    margin-top: var(--_sp-xl);
  }

  .mt-xxl {
    margin-top: var(--_sp-xxl);
  }

  /*! * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

  .mb-0 {
    margin-bottom: 0;
  }

  .mb-sm {
    margin-bottom: var(--_sp-sm);
  }

  .mb-md {
    margin-bottom: var(--_sp-md);
  }

  .mb-lg {
    margin-bottom: var(--_sp-lg);
  }

  .mb-xl {
    margin-bottom: var(--_sp-xl);
  }

  .mb-xxl {
    margin-bottom: var(--_sp-xxl);
  }

  /*! * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

  .ml-0 {
    margin-left: 0;
  }

  .ml-sm {
    margin-left: var(--_sp-sm);
  }

  .ml-md {
    margin-left: var(--_sp-md);
  }

  .ml-lg {
    margin-left: var(--_sp-lg);
  }

  .ml-xl {
    margin-left: var(--_sp-xl);
  }

  .ml-xxl {
    margin-left: var(--_sp-xxl);
  }

  /*! * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

  .mr-0 {
    margin-right: 0;
  }

  .mr-sm {
    margin-right: var(--_sp-sm);
  }

  .mr-md {
    margin-right: var(--_sp-md);
  }

  .mr-lg {
    margin-right: var(--_sp-lg);
  }

  .mr-xl {
    margin-right: var(--_sp-xl);
  }

  .mr-xxl {
    margin-right: var(--_sp-xxl);
  }

  /*!***********************
  *****     PADDINGS    ****
  *************************/

  .p-0 {
    padding: 0;
  }

  .p-sm {
    padding: var(--_sp-sm);
  }

  .p-md {
    padding: var(--_sp-md);
  }

  .p-lg {
    padding: var(--_sp-lg);
  }

  .p-xl {
    padding: var(--_sp-xl);
  }

  .p-xxl {
    padding: var(--_sp-xxl);
  }

  /*! * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

  .px-0 {
    padding-inline: 0;
  }

  .px-sm {
    padding-inline: var(--_sp-sm);
  }

  .px-md {
    padding-inline: var(--_sp-md);
  }

  .px-lg {
    padding-inline: var(--_sp-lg);
  }

  .px-xl {
    padding-inline: var(--_sp-xl);
  }

  .px-xxl {
    padding-inline: var(--_sp-xxl);
  }

  /*! * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

  .py-0 {
    padding-block: 0;
  }

  .py-sm {
    padding-block: var(--_sp-sm);
  }

  .py-md {
    padding-block: var(--_sp-md);
  }

  .py-lg {
    padding-block: var(--_sp-lg);
  }

  .py-xl {
    padding-block: var(--_sp-xl);
  }

  .py-xxl {
    padding-block: var(--_sp-xxl);
  }

  /*! * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

  .pt-0 {
    padding-top: 0;
  }

  .pt-sm {
    padding-top: var(--_sp-sm);
  }

  .pt-md {
    padding-top: var(--_sp-md);
  }

  .pt-lg {
    padding-top: var(--_sp-lg);
  }

  .pt-xl {
    padding-top: var(--_sp-lg);
  }

  .pt-xxl {
    padding-top: var(--_sp-xxl);
  }

  /*! * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

  .pb-0 {
    padding-bottom: 0;
  }

  .pb-sm {
    padding-bottom: var(--_sp-sm);
  }

  .pb-md {
    padding-bottom: var(--_sp-md);
  }

  .pb-lg {
    padding-bottom: var(--_sp-lg);
  }

  .pb-xl {
    padding-bottom: var(--_sp-xl);
  }

  .pb-xxl {
    padding-bottom: var(--_sp-xxl);
  }

  /*! * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

  .pl-0 {
    padding-left: 0;
  }

  .pl-sm {
    padding-left: var(--_sp-sm);
  }

  .pl-md {
    padding-left: var(--_sp-md);
  }

  .pl-lg {
    padding-left: var(--_sp-lg);
  }

  .pl-xl {
    padding-left: var(--_sp-xl);
  }

  .pl-xxl {
    padding-left: var(--_sp-xxl);
  }

  /*! * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

  .pr-0 {
    padding-right: 0;
  }

  .pr-sm {
    padding-right: var(--_sp-sm);
  }

  .pr-md {
    padding-right: var(--_sp-md);
  }

  .pr-lg {
    padding-right: var(--_sp-lg);
  }

  .pr-xl {
    padding-right: var(--_sp-xl);
  }

  .pr-xxl {
    padding-right: var(--_sp-xxl);
  }
}