/* ===================================================================
   MOBILE — Classes m- (≤767px)
   Aplicam-se apenas em mobile, até 767px.

   ÍNDICE
   -------------------------------------------------------------------
   1. MARGIN ....... all, top/right/bottom/left, inline/block · 0→3xl
   2. PADDING ...... all, top/right/bottom/left, inline/block · 0→3xl
   3. BORDER ....... width: all, lados, inline/block
   4. DISPLAY ...... hide, show, flex, inline, inline-block
   5. TEXT ......... align center/left/right
   6. WIDTH ........ 100, auto
   -------------------------------------------------------------------
   =================================================================== */

@media (max-width: 767px) {

  /* =================================================================
     1. MARGIN
     ================================================================= */
  /* ----- Todos os lados ----- */
  .m-m-0   { margin: 0 !important; }
  .m-m-1   { margin: var(--space-px) !important; }
  .m-m-3xs { margin: var(--space-1) !important; }
  .m-m-2xs { margin: var(--space-0-5) !important; }
  .m-m-xs  { margin: var(--space-2-5) !important; }
  .m-m-s   { margin: var(--space-4) !important; }
  .m-m-m   { margin: var(--space-6) !important; }
  .m-m-l   { margin: var(--space-8) !important; }
  .m-m-xl  { margin: var(--space-11) !important; }
  .m-m-2xl { margin: var(--space-16) !important; }
  .m-m-3xl { margin: var(--space-24) !important; }

  /* ----- Top ----- */
  .m-mt-0   { margin-top: 0 !important; }
  .m-mt-1   { margin-top: var(--space-px) !important; }
  .m-mt-3xs { margin-top: var(--space-1) !important; }
  .m-mt-2xs { margin-top: var(--space-0-5) !important; }
  .m-mt-xs  { margin-top: var(--space-2-5) !important; }
  .m-mt-s   { margin-top: var(--space-4) !important; }
  .m-mt-m   { margin-top: var(--space-6) !important; }
  .m-mt-l   { margin-top: var(--space-8) !important; }
  .m-mt-xl  { margin-top: var(--space-11) !important; }
  .m-mt-2xl { margin-top: var(--space-16) !important; }
  .m-mt-3xl { margin-top: var(--space-24) !important; }

  /* ----- Right ----- */
  .m-mr-0   { margin-right: 0 !important; }
  .m-mr-1   { margin-right: var(--space-px) !important; }
  .m-mr-3xs { margin-right: var(--space-1) !important; }
  .m-mr-2xs { margin-right: var(--space-0-5) !important; }
  .m-mr-xs  { margin-right: var(--space-2-5) !important; }
  .m-mr-s   { margin-right: var(--space-4) !important; }
  .m-mr-m   { margin-right: var(--space-6) !important; }
  .m-mr-l   { margin-right: var(--space-8) !important; }
  .m-mr-xl  { margin-right: var(--space-11) !important; }
  .m-mr-2xl { margin-right: var(--space-16) !important; }
  .m-mr-3xl { margin-right: var(--space-24) !important; }

  /* ----- Bottom ----- */
  .m-mb-0   { margin-bottom: 0 !important; }
  .m-mb-1   { margin-bottom: var(--space-px) !important; }
  .m-mb-3xs { margin-bottom: var(--space-1) !important; }
  .m-mb-2xs { margin-bottom: var(--space-0-5) !important; }
  .m-mb-xs  { margin-bottom: var(--space-2-5) !important; }
  .m-mb-s   { margin-bottom: var(--space-4) !important; }
  .m-mb-m   { margin-bottom: var(--space-6) !important; }
  .m-mb-l   { margin-bottom: var(--space-8) !important; }
  .m-mb-xl  { margin-bottom: var(--space-11) !important; }
  .m-mb-2xl { margin-bottom: var(--space-16) !important; }
  .m-mb-3xl { margin-bottom: var(--space-24) !important; }

  /* ----- Left ----- */
  .m-ml-0   { margin-left: 0 !important; }
  .m-ml-1   { margin-left: var(--space-px) !important; }
  .m-ml-3xs { margin-left: var(--space-1) !important; }
  .m-ml-2xs { margin-left: var(--space-0-5) !important; }
  .m-ml-xs  { margin-left: var(--space-2-5) !important; }
  .m-ml-s   { margin-left: var(--space-4) !important; }
  .m-ml-m   { margin-left: var(--space-6) !important; }
  .m-ml-l   { margin-left: var(--space-8) !important; }
  .m-ml-xl  { margin-left: var(--space-11) !important; }
  .m-ml-2xl { margin-left: var(--space-16) !important; }
  .m-ml-3xl { margin-left: var(--space-24) !important; }

  /* ----- Inline (horizontal) ----- */
  .m-mx-0   { margin-inline: 0 !important; }
  .m-mx-1   { margin-inline: var(--space-px) !important; }
  .m-mx-3xs { margin-inline: var(--space-1) !important; }
  .m-mx-2xs { margin-inline: var(--space-0-5) !important; }
  .m-mx-xs  { margin-inline: var(--space-2-5) !important; }
  .m-mx-s   { margin-inline: var(--space-4) !important; }
  .m-mx-m   { margin-inline: var(--space-6) !important; }
  .m-mx-l   { margin-inline: var(--space-8) !important; }
  .m-mx-xl  { margin-inline: var(--space-11) !important; }
  .m-mx-2xl { margin-inline: var(--space-16) !important; }
  .m-mx-3xl { margin-inline: var(--space-24) !important; }

  /* ----- Block (vertical) ----- */
  .m-my-0   { margin-block: 0 !important; }
  .m-my-1   { margin-block: var(--space-px) !important; }
  .m-my-3xs { margin-block: var(--space-1) !important; }
  .m-my-2xs { margin-block: var(--space-0-5) !important; }
  .m-my-xs  { margin-block: var(--space-2-5) !important; }
  .m-my-s   { margin-block: var(--space-4) !important; }
  .m-my-m   { margin-block: var(--space-6) !important; }
  .m-my-l   { margin-block: var(--space-8) !important; }
  .m-my-xl  { margin-block: var(--space-11) !important; }
  .m-my-2xl { margin-block: var(--space-16) !important; }
  .m-my-3xl { margin-block: var(--space-24) !important; }

  /* =================================================================
     2. PADDING
     ================================================================= */
  /* ----- Todos os lados ----- */
  .m-p-0   { padding: 0 !important; }
  .m-p-1   { padding: var(--space-px) !important; }
  .m-p-3xs { padding: var(--space-1) !important; }
  .m-p-2xs { padding: var(--space-0-5) !important; }
  .m-p-xs  { padding: var(--space-2-5) !important; }
  .m-p-s   { padding: var(--space-4) !important; }
  .m-p-m   { padding: var(--space-6) !important; }
  .m-p-l   { padding: var(--space-8) !important; }
  .m-p-xl  { padding: var(--space-11) !important; }
  .m-p-2xl { padding: var(--space-16) !important; }
  .m-p-3xl { padding: var(--space-24) !important; }

  /* ----- Top ----- */
  .m-pt-0   { padding-top: 0 !important; }
  .m-pt-1   { padding-top: var(--space-px) !important; }
  .m-pt-3xs { padding-top: var(--space-1) !important; }
  .m-pt-2xs { padding-top: var(--space-0-5) !important; }
  .m-pt-xs  { padding-top: var(--space-2-5) !important; }
  .m-pt-s   { padding-top: var(--space-4) !important; }
  .m-pt-m   { padding-top: var(--space-6) !important; }
  .m-pt-l   { padding-top: var(--space-8) !important; }
  .m-pt-xl  { padding-top: var(--space-11) !important; }
  .m-pt-2xl { padding-top: var(--space-16) !important; }
  .m-pt-3xl { padding-top: var(--space-24) !important; }

  /* ----- Right ----- */
  .m-pr-0   { padding-right: 0 !important; }
  .m-pr-1   { padding-right: var(--space-px) !important; }
  .m-pr-3xs { padding-right: var(--space-1) !important; }
  .m-pr-2xs { padding-right: var(--space-0-5) !important; }
  .m-pr-xs  { padding-right: var(--space-2-5) !important; }
  .m-pr-s   { padding-right: var(--space-4) !important; }
  .m-pr-m   { padding-right: var(--space-6) !important; }
  .m-pr-l   { padding-right: var(--space-8) !important; }
  .m-pr-xl  { padding-right: var(--space-11) !important; }
  .m-pr-2xl { padding-right: var(--space-16) !important; }
  .m-pr-3xl { padding-right: var(--space-24) !important; }

  /* ----- Bottom ----- */
  .m-pb-0   { padding-bottom: 0 !important; }
  .m-pb-1   { padding-bottom: var(--space-px) !important; }
  .m-pb-3xs { padding-bottom: var(--space-1) !important; }
  .m-pb-2xs { padding-bottom: var(--space-0-5) !important; }
  .m-pb-xs  { padding-bottom: var(--space-2-5) !important; }
  .m-pb-s   { padding-bottom: var(--space-4) !important; }
  .m-pb-m   { padding-bottom: var(--space-6) !important; }
  .m-pb-l   { padding-bottom: var(--space-8) !important; }
  .m-pb-xl  { padding-bottom: var(--space-11) !important; }
  .m-pb-2xl { padding-bottom: var(--space-16) !important; }
  .m-pb-3xl { padding-bottom: var(--space-24) !important; }

  /* ----- Left ----- */
  .m-pl-0   { padding-left: 0 !important; }
  .m-pl-1   { padding-left: var(--space-px) !important; }
  .m-pl-3xs { padding-left: var(--space-1) !important; }
  .m-pl-2xs { padding-left: var(--space-0-5) !important; }
  .m-pl-xs  { padding-left: var(--space-2-5) !important; }
  .m-pl-s   { padding-left: var(--space-4) !important; }
  .m-pl-m   { padding-left: var(--space-6) !important; }
  .m-pl-l   { padding-left: var(--space-8) !important; }
  .m-pl-xl  { padding-left: var(--space-11) !important; }
  .m-pl-2xl { padding-left: var(--space-16) !important; }
  .m-pl-3xl { padding-left: var(--space-24) !important; }

  /* ----- Inline (horizontal) ----- */
  .m-px-0   { padding-inline: 0 !important; }
  .m-px-1   { padding-inline: var(--space-px) !important; }
  .m-px-3xs { padding-inline: var(--space-1) !important; }
  .m-px-2xs { padding-inline: var(--space-0-5) !important; }
  .m-px-xs  { padding-inline: var(--space-2-5) !important; }
  .m-px-s   { padding-inline: var(--space-4) !important; }
  .m-px-m   { padding-inline: var(--space-6) !important; }
  .m-px-l   { padding-inline: var(--space-8) !important; }
  .m-px-xl  { padding-inline: var(--space-11) !important; }
  .m-px-2xl { padding-inline: var(--space-16) !important; }
  .m-px-3xl { padding-inline: var(--space-24) !important; }

  /* ----- Block (vertical) ----- */
  .m-py-0   { padding-block: 0 !important; }
  .m-py-1   { padding-block: var(--space-px) !important; }
  .m-py-3xs { padding-block: var(--space-1) !important; }
  .m-py-2xs { padding-block: var(--space-0-5) !important; }
  .m-py-xs  { padding-block: var(--space-2-5) !important; }
  .m-py-s   { padding-block: var(--space-4) !important; }
  .m-py-m   { padding-block: var(--space-6) !important; }
  .m-py-l   { padding-block: var(--space-8) !important; }
  .m-py-xl  { padding-block: var(--space-11) !important; }
  .m-py-2xl { padding-block: var(--space-16) !important; }
  .m-py-3xl { padding-block: var(--space-24) !important; }

  /* =================================================================
     3. BORDER WIDTH
     ================================================================= */
  .m-border-0 { border-width: var(--border-0) !important; }
  .m-border-1 { border-width: var(--border-1) !important; }

  .m-border-top-0    { border-top-width:    var(--border-0) !important; }
  .m-border-top-1    { border-top-width:    var(--border-1) !important; }
  .m-border-right-0  { border-right-width:  var(--border-0) !important; }
  .m-border-right-1  { border-right-width:  var(--border-1) !important; }
  .m-border-bottom-0 { border-bottom-width: var(--border-0) !important; }
  .m-border-bottom-1 { border-bottom-width: var(--border-1) !important; }
  .m-border-left-0   { border-left-width:   var(--border-0) !important; }
  .m-border-left-1   { border-left-width:   var(--border-1) !important; }

  .m-border-inline-0 { border-inline-width: var(--border-0) !important; }
  .m-border-inline-1 { border-inline-width: var(--border-1) !important; }
  .m-border-block-0  { border-block-width:  var(--border-0) !important; }
  .m-border-block-1  { border-block-width:  var(--border-1) !important; }

  /* =================================================================
     4. DISPLAY
     ================================================================= */
  .m-hide         { display: none         !important; }
  .m-show         { display: block        !important; }
  .m-flex         { display: flex         !important; }
  .m-inline       { display: inline       !important; }
  .m-inline-block { display: inline-block !important; }

  /* =================================================================
     5. TEXT ALIGN
     ================================================================= */
  .m-text-center { text-align: center !important; }
  .m-text-left   { text-align: left   !important; }
  .m-text-right  { text-align: right  !important; }

  /* =================================================================
     6. WIDTH
     ================================================================= */
  .m-width-100  { width: 100%  !important; }
  .m-width-auto { width: auto  !important; }

}