:root{
  /* Cores neutras */
--color-neutral-100: #f5f5f5;
--color-neutral-200: #e5e7eb;
--color-neutral-300: #d1d5db;
--color-neutral-400: #9ca3af;
--color-neutral-500: #6b7280;
--color-neutral-600: #4b5563;
--color-neutral-700: #374151;
--color-neutral-800: #1f2937;
--color-neutral-900: #111827;
/* Cores vermelhas */
--color-red-100: #fef2f2;
--color-red-200: #fee2e2;
--color-red-300: #fecaca;
--color-red-400: #f87171;
--color-red-500: #ef4444;
--color-red-600: #dc2626;
--color-red-700: #b91c1c;
--color-red-800: #991b1b;
--color-red-900: #7f1d1d;

/* Cores amarelas */
--color-yellow-100: #fef3c7;
--color-yellow-200: #fde68a;
--color-yellow-300: #fcd34d;
--color-yellow-400: #fbbf24;
--color-yellow-500: #f59e0b;
--color-yellow-600: #d97706;
--color-yellow-700: #b45309;
--color-yellow-800: #92400e;
--color-yellow-900: #78350f;

/* Cores verdes */
--color-green-100: #dcfce7;
--color-green-200: #a7f3d0;
--color-green-300: #6ee7b7;
--color-green-400: #34d399;
--color-green-500: #10b981;
--color-green-600: #059669;
--color-green-700: #047857;
--color-green-800: #065f46;
--color-green-900: #064e3b;

/* Cores azuis */
--color-blue-100: #eff6ff;
--color-blue-200: #dbeafe;
--color-blue-300: #93c5fd;
--color-blue-400: #60a5fa;
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
--color-blue-800: #1e40af;
--color-blue-900: #1e3a8a;

/* Cores roxas */
--color-purple-100: #f5f3ff;
--color-purple-200: #ebe9fe;
--color-purple-300: #d6bcfa;
--color-purple-400: #b794f4;
--color-purple-500: #8b5cf6;
--color-purple-600: #7c3aed;
--color-purple-700: #6d28d9;
--color-purple-800: #5b21b6;
--color-purple-900: #4c1d95;

/* Cores rosas */
--color-pink-100: #fff5f7;
--color-pink-200: #fed7e2;
--color-pink-300: #fbb6ce;
--color-pink-400: #f687b3;
--color-pink-500: #ec4899;
--color-pink-600: #db2777;
--color-pink-700: #be185d;
--color-pink-800: #9d174d;
--color-pink-900: #831843;

/* Cores laranjas */
--color-orange-100: #fffaf0;
--color-orange-200: #feebc8;
--color-orange-300: #fbd38d;
--color-orange-400: #f6ad55;
--color-orange-500: #ed8936;
--color-orange-600: #dd6b20;
--color-orange-700: #c05621;
--color-orange-800: #9c4221;
--color-orange-900: #7b341e;
}
/* Classes de padding com o nome "p-valor" */
.p-0{
  padding: 0;
}
.p-1 {
  padding: 4px;
}

.p-2 {
  padding: 8px;
}

.p-3 {
  padding: 12px;
}

.p-4 {
  padding: 16px;
}

.p-5 {
  padding: 20px;
}

.p-6 {
  padding: 24px;
}

.p-7 {
  padding: 28px;
}

.p-8 {
  padding: 32px;
}

.p-9 {
  padding: 36px;
}

.p-10 {
  padding: 40px;
}

.p-11 {
  padding: 44px;
}

.p-12 {
  padding: 48px;
}

.p-13 {
  padding: 52px;
}

.p-14 {
  padding: 56px;
}

.p-15 {
  padding: 60px;
}

.p-16 {
  padding: 64px;
}

.p-17 {
  padding: 68px;
}

.p-18 {
  padding: 72px;
}

.p-19 {
  padding: 76px;
}

.p-20 {
  padding: 80px;
}

.p-21 {
  padding: 84px;
}

.p-22 {
  padding: 88px;
}

.p-23 {
  padding: 92px;
}

.p-24 {
  padding: 96px;
}

.p-25 {
  padding: 100px;
}

.p-26 {
  padding: 104px;
}

.p-27 {
  padding: 108px;
}

.p-28 {
  padding: 112px;
}

.p-29 {
  padding: 116px;
}

.p-30 {
  padding: 120px;
}


.pt-1 {
  padding-top: 4px;
}

.pt-2 {
  padding-top: 8px;
}

.pt-3 {
  padding-top: 12px;
}

.pt-4 {
  padding-top: 16px;
}

.pt-5 {
  padding-top: 20px;
}

.pt-6 {
  padding-top: 24px;
}

.pt-7 {
  padding-top: 28px;
}

.pt-8 {
  padding-top: 32px;
}

.pt-9 {
  padding-top: 36px;
}

.pt-10 {
  padding-top: 40px;
}

.pt-11 {
  padding-top: 44px;
}

.pt-12 {
  padding-top: 48px;
}

.pt-13 {
  padding-top: 52px;
}

.pt-14 {
  padding-top: 56px;
}

.pt-15 {
  padding-top: 60px;
}

.pt-16 {
  padding-top: 64px;
}

.pt-17 {
  padding-top: 68px;
}

.pt-18 {
  padding-top: 72px;
}

.pt-19 {
  padding-top: 76px;
}

.pt-20 {
  padding-top: 80px;
}

.pt-21 {
  padding-top: 84px;
}

.pt-22 {
  padding-top: 88px;
}

.pt-23 {
  padding-top: 92px;
}

.pt-24 {
  padding-top: 96px;
}

.pt-25 {
  padding-top: 100px;
}

.pt-26 {
  padding-top: 104;
}

.pt-27 {
  padding-top: 108px;
}

.pt-28 {
  padding-top: 112px;
}

.pt-29 {
  padding-top: 116px;
}

.pt-30 {
  padding-top: 120px;
}

.pr-1 {
  padding-right: 4px;
}

.pr-2 {
  padding-right: 8px;
}

.pr-3 {
  padding-right: 12px;
}

.pr-4 {
  padding-right: 16px;
}

.pr-5 {
  padding-right: 20px;
}

.pr-6 {
  padding-right: 24px;
}

.pr-7 {
  padding-right: 28px;
}

.pr-8 {
  padding-right: 32px;
}

.pr-9 {
  padding-right: 36px;
}

.pr-10 {
  padding-right: 40px;
}

.pr-11 {
  padding-right: 44px;
}

.pr-12 {
  padding-right: 48px;
}

.pr-13 {
  padding-right: 52px;
}

.pr-14 {
  padding-right: 56px;
}

.pr-15 {
  padding-right: 60px;
}

.pr-16 {
  padding-right: 64px;
}

.pr-17 {
  padding-right: 68px;
}

.pr-18 {
  padding-right: 72px;
}

.pr-19 {
  padding-right: 76px;
}

.pr-20 {
  padding-right: 80px;
}

.pr-21 {
  padding-right: 84px;
}

.pr-22 {
  padding-right: 88px;
}

.pr-23 {
  padding-right: 92px;
}

.pr-24 {
  padding-right: 96px;
}

.pr-25 {
  padding-right: 100px;
}

.pr-26 {
  padding-right: 104px;
}

.pr-27 {
  padding-right: 108px;
}

.pr-28 {
  padding-right: 112px;
}

.pr-29 {
  padding-right: 116px;
}

.pr-30 {
  padding-right: 120px;
}

.pb-1 { padding-bottom: 4px; }
.pb-2 { padding-bottom: 8px; }
.pb-3 { padding-bottom: 12px; }
.pb-4 { padding-bottom: 16px; }
.pb-5 { padding-bottom: 20px; }
.pb-6 { padding-bottom: 24px; }
.pb-7 { padding-bottom: 28px; }
.pb-8 { padding-bottom: 32px; }
.pb-9 { padding-bottom: 36px; }
.pb-10 { padding-bottom: 40px; }
.pb-11 { padding-bottom: 44px; }
.pb-12 { padding-bottom: 48px; }
.pb-13 { padding-bottom: 52px; }
.pb-14 { padding-bottom: 56px; }
.pb-15 { padding-bottom: 60px; }
.pb-16 { padding-bottom: 64px; }
.pb-17 { padding-bottom: 68px; }
.pb-18 { padding-bottom: 72px; }
.pb-19 { padding-bottom: 76px; }
.pb-20 { padding-bottom: 80px; }
.pb-21 { padding-bottom: 84px; }
.pb-22 { padding-bottom: 88px; }
.pb-23 { padding-bottom: 92px; }
.pb-24 { padding-bottom: 96px; }
.pb-25 { padding-bottom: 100px; }
.pb-26 { padding-bottom: 104px; }
.pb-27 { padding-bottom: 108px; }
.pb-28 { padding-bottom: 112px; }
.pb-29 { padding-bottom: 116px; }
.pb-30 { padding-bottom: 120px; }

.pl-1 { padding-left: 4px; }
.pl-2 { padding-left: 8px; }
.pl-3 { padding-left: 12px; }
.pl-4 { padding-left: 16px; }
.pl-5 { padding-left: 20px; }
.pl-6 { padding-left: 24px; }
.pl-7 { padding-left: 28px; }
.pl-8 { padding-left: 32px; }
.pl-9 { padding-left: 36px; }
.pl-10 { padding-left: 40px; }
.pl-11 { padding-left: 44px; }
.pl-12 { padding-left: 48px; }
.pl-13 { padding-left: 52px; }
.pl-14 { padding-left: 56px; }
.pl-15 { padding-left: 60px; }
.pl-16 { padding-left: 64px; }
.pl-17 { padding-left: 68px; }
.pl-18 { padding-left: 72px; }
.pl-19 { padding-left: 76px; }
.pl-20 { padding-left: 80px; }
.pl-21 { padding-left: 84px; }
.pl-22 { padding-left: 88px; }
.pl-23 { padding-left: 92px; }
.pl-24 { padding-left: 96px; }
.pl-25 { padding-left: 100px; }
.pl-26 { padding-left: 104px; }
.pl-27 { padding-left: 108px; }
.pl-28 { padding-left: 112px; }
.pl-29 { padding-left: 116px; }
.pl-30 { padding-left: 120px; }

/* Classes de padding vertical com o nome "py-valor" */
.py-1 {
  padding-top: 4px;
  padding-bottom: 4px;
}
.py-2 {
  padding-top: 8px;
  padding-bottom: 8px;
}
.py-3 {
  padding-top: 12px;
  padding-bottom: 12px;
}
.py-4 {
  padding-top: 16px;
  padding-bottom: 16px;
}
.py-5 {
  padding-top: 20px;
  padding-bottom: 20px;
}
.py-6 {
  padding-top: 24px;
  padding-bottom: 24px;
}
.py-7 {
  padding-top: 28px;
  padding-bottom: 28px;
}
.py-8 {
  padding-top: 32px;
  padding-bottom: 32px;
}
.py-9 {
  padding-top: 36px;
  padding-bottom: 36px;
}
.py-10 {
  padding-top: 40px;
  padding-bottom: 40px;
}
.py-11 {
  padding-top: 44px;
  padding-bottom: 44px;
}
.py-12 {
  padding-top: 48px;
  padding-bottom: 48px;
}
.py-13 {
  padding-top: 52px;
  padding-bottom: 52px;
}
.py-14 {
  padding-top: 56px;
  padding-bottom: 56px;
}
.py-15 {
  padding-top: 60px;
  padding-bottom: 60px;
}
.py-16 {
  padding-top: 64px;
  padding-bottom: 64px;
}
.py-17 {
  padding-top: 68px;
  padding-bottom: 68px;
}
.py-18 {
  padding-top: 72px;
  padding-bottom: 72px;
}
.py-19 {
  padding-top: 76px;
  padding-bottom: 76px;
}
.py-20 {
  padding-top: 80px;
  padding-bottom: 80px;
}
.py-21 {
  padding-top: 84px;
  padding-bottom: 84px;
}
.py-22 {
  padding-top: 88px;
  padding-bottom: 88px;
}
.py-23 {
  padding-top: 92px;
  padding-bottom: 92px;
}
.py-24 {
  padding-top: 96px;
  padding-bottom: 96px;
}
.py-25 {
  padding-top: 100px;
  padding-bottom: 100px;
}
.py-26 {
  padding-top: 104px;
  padding-bottom: 104px;
}
.py-27 {
  padding-top: 108px;
  padding-bottom: 108px;
}
.py-28 {
  padding-top: 112px;
  padding-bottom: 112px;
}
.py-29 {
  padding-top: 116px;
  padding-bottom: 116px;
}
.py-30 {
  padding-top: 120px;
  padding-bottom: 120px;
}

/* Classes de padding com o nome "px-valor" */
.px-1 {
  padding-left: 4px;
  padding-right: 4px;
}
.px-2 {
  padding-left: 8px;
  padding-right: 8px;
}
.px-3 {
  padding-left: 12px;
  padding-right: 12px;
}
.px-4 {
  padding-left: 16px;
  padding-right: 16px;
}
.px-5 {
  padding-left: 20px;
  padding-right: 20px;
}
.px-6 {
  padding-left: 24px;
  padding-right: 24px;
}
.px-7 {
  padding-left: 28px;
  padding-right: 28px;
}
.px-8 {
  padding-left: 32px;
  padding-right: 32px;
}
.px-9 {
  padding-left: 36px;
  padding-right: 36px;
}
.px-10 {
  padding-left: 40px;
  padding-right: 40px;
}
.px-11 {
  padding-left: 44px;
  padding-right: 44px;
}
.px-12 {
  padding-left: 48px;
  padding-right: 48px;
}
.px-13 {
  padding-left: 52px;
  padding-right: 52px;
}
.px-14 {
  padding-left: 56px;
  padding-right: 56px;
}
.px-15 {
  padding-left: 60px;
  padding-right: 60px;
}
.px-16 {
  padding-left: 64px;
  padding-right: 64px;
}
.px-17 {
  padding-left: 68px;
  padding-right: 68px;
}
.px-18 {
  padding-left: 72px;
  padding-right: 72px;
}
.px-19 {
  padding-left: 76px;
  padding-right: 76px;
}
.px-20 {
  padding-left: 80px;
  padding-right: 80px;
}
.px-21 {
  padding-left: 84px;
  padding-right: 84px;
}
.px-22 {
  padding-left: 88px;
  padding-right: 88px;
}
.px-23 {
  padding-left: 92px;
  padding-right: 92px;
}
.px-24 {
  padding-left: 96px;
  padding-right: 96px;
}
.px-25 {
  padding-left: 100px;
  padding-right: 100px;
}
.px-26 {
  padding-left: 104px;
  padding-right: 104px;
}
.px-27 {
  padding-left: 108px;
  padding-right: 108px;
}
.px-28 {
  padding-left: 112px;
  padding-right: 112px;
}
.px-29 {
  padding-left: 116px;
  padding-right: 116px;
}
.px-30 {
  padding-left: 120px;
  padding-right: 120px;
}

/* PADDING PORCENTAGEM */

.p-1P {
  padding: 4%;
}

.p-2P {
  padding: 8%;
}

.p-3P {
  padding: 12%;
}

/* Margin */
.m-1 {
  margin: 4px;
}

.m-2 {
  margin: 8px;
}

.m-3 {
  margin: 12px;
}

.m-4 {
  margin: 16px;
}

.m-5 {
  margin: 20px;
}

.m-6 {
  margin: 24px;
}

.m-7 {
  margin: 28px;
}

.m-8 {
  margin: 32px;
}

.m-9 {
  margin: 36px;
}

.m-10 {
  margin: 40px;
}

.m-11 {
  margin: 44px;
}

.m-12 {
  margin: 48px;
}

.m-13 {
  margin: 52px;
}

.m-14 {
  margin: 56px;
}

.m-15 {
  margin: 60px;
}

.m-16 {
  margin: 64px;
}

.m-17 {
  margin: 68px;
}

.m-18 {
  margin: 72px;
}

.m-19 {
  margin: 76px;
}

.m-20 {
  margin: 80px;
}

.m-21 {
  margin: 84px;
}

.m-22 {
  margin: 88px;
}

.m-23 {
  margin: 92px;
}

.m-24 {
  margin: 96px;
}

.m-25 {
  margin: 100px;
}

.m-26 {
  margin: 104px;
}

.m-27 {
  margin: 108px;
}

.m-28 {
  margin: 112px;
}

.m-29 {
  margin: 116px;
}

.m-30 {
  margin: 120px;
}


.mt-1 {
  margin-top: 4px;
}

.mt-2 {
  margin-top: 8px;
}

.mt-3 {
  margin-top: 12px;
}

.mt-4 {
  margin-top: 16px;
}

.mt-5 {
  margin-top: 20px;
}

.mt-6 {
  margin-top: 24px;
}

.mt-7 {
  margin-top: 28px;
}

.mt-8 {
  margin-top: 32px;
}

.mt-9 {
  margin-top: 36px;
}

.mt-10 {
  margin-top: 40px;
}

.mt-11 {
  margin-top: 44px;
}

.mt-12 {
  margin-top: 48px;
}

.mt-13 {
  margin-top: 52px;
}

.mt-14 {
  margin-top: 56px;
}

.mt-15 {
  margin-top: 60px;
}

.mt-16 {
  margin-top: 64px;
}

.mt-17 {
  margin-top: 68px;
}

.mt-18 {
  margin-top: 72px;
}

.mt-19 {
  margin-top: 76px;
}

.mt-20 {
  margin-top: 80px;
}

.mt-21 {
  margin-top: 84px;
}

.mt-22 {
  margin-top: 88px;
}

.mt-23 {
  margin-top: 92px;
}

.mt-24 {
  margin-top: 96px;
}

.mt-25 {
  margin-top: 100px;
}

.mt-26 {
  margin-top: 104;
}

.mt-27 {
  margin-top: 108px;
}

.mt-28 {
  margin-top: 112px;
}

.mt-29 {
  margin-top: 116px;
}

.mt-30 {
  margin-top: 120px;
}

.mr-1 {
  margin-right: 4px;
}

.mr-2 {
  margin-right: 8px;
}

.mr-3 {
  margin-right: 12px;
}

.mr-4 {
  margin-right: 16px;
}

.mr-5 {
  margin-right: 20px;
}

.mr-6 {
  margin-right: 24px;
}

.mr-7 {
  margin-right: 28px;
}

.mr-8 {
  margin-right: 32px;
}

.mr-9 {
  margin-right: 36px;
}

.mr-10 {
  margin-right: 40px;
}

.mr-11 {
  margin-right: 44px;
}

.mr-12 {
  margin-right: 48px;
}

.mr-13 {
  margin-right: 52px;
}

.mr-14 {
  margin-right: 56px;
}

.mr-15 {
  margin-right: 60px;
}

.mr-16 {
  margin-right: 64px;
}

.mr-17 {
  margin-right: 68px;
}

.mr-18 {
  margin-right: 72px;
}

.mr-19 {
  margin-right: 76px;
}

.mr-20 {
  margin-right: 80px;
}

.mr-21 {
  margin-right: 84px;
}

.mr-22 {
  margin-right: 88px;
}

.mr-23 {
  margin-right: 92px;
}

.mr-24 {
  margin-right: 96px;
}

.mr-25 {
  margin-right: 100px;
}

.mr-26 {
  margin-right: 104px;
}

.mr-27 {
  margin-right: 108px;
}

.mr-28 {
  margin-right: 112px;
}

.mr-29 {
  margin-right: 116px;
}

.mr-30 {
  margin-right: 120px;
}

.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }
.mb-6 { margin-bottom: 24px; }
.mb-7 { margin-bottom: 28px; }
.mb-8 { margin-bottom: 32px; }
.mb-9 { margin-bottom: 36px; }
.mb-10 { margin-bottom: 40px; }
.mb-11 { margin-bottom: 44px; }
.mb-12 { margin-bottom: 48px; }
.mb-13 { margin-bottom: 52px; }
.mb-14 { margin-bottom: 56px; }
.mb-15 { margin-bottom: 60px; }
.mb-16 { margin-bottom: 64px; }
.mb-17 { margin-bottom: 68px; }
.mb-18 { margin-bottom: 72px; }
.mb-19 { margin-bottom: 76px; }
.mb-20 { margin-bottom: 80px; }
.mb-21 { margin-bottom: 84px; }
.mb-22 { margin-bottom: 88px; }
.mb-23 { margin-bottom: 92px; }
.mb-24 { margin-bottom: 96px; }
.mb-25 { margin-bottom: 100px; }
.mb-26 { margin-bottom: 104px; }
.mb-27 { margin-bottom: 108px; }
.mb-28 { margin-bottom: 112px; }
.mb-29 { margin-bottom: 116px; }
.mb-30 { margin-bottom: 120px; }

.ml-1 { margin-left: 4px; }
.ml-2 { margin-left: 8px; }
.ml-3 { margin-left: 12px; }
.ml-4 { margin-left: 16px; }
.ml-5 { margin-left: 20px; }
.ml-6 { margin-left: 24px; }
.ml-7 { margin-left: 28px; }
.ml-8 { margin-left: 32px; }
.ml-9 { margin-left: 36px; }
.ml-10 { margin-left: 40px; }
.ml-11 { margin-left: 44px; }
.ml-12 { margin-left: 48px; }
.ml-13 { margin-left: 52px; }
.ml-14 { margin-left: 56px; }
.ml-15 { margin-left: 60px; }
.ml-16 { margin-left: 64px; }
.ml-17 { margin-left: 68px; }
.ml-18 { margin-left: 72px; }
.ml-19 { margin-left: 76px; }
.ml-20 { margin-left: 80px; }
.ml-21 { margin-left: 84px; }
.ml-22 { margin-left: 88px; }
.ml-23 { margin-left: 92px; }
.ml-24 { margin-left: 96px; }
.ml-25 { margin-left: 100px; }
.ml-26 { margin-left: 104px; }
.ml-27 { margin-left: 108px; }
.ml-28 { margin-left: 112px; }
.ml-29 { margin-left: 116px; }
.ml-30 { margin-left: 120px; }

/* Classes de margin vertical com o nome "py-valor" */
.my-1 {
  margin-top: 4px;
  margin-bottom: 4px;
}
.my-2 {
  margin-top: 8px;
  margin-bottom: 8px;
}
.my-3 {
  margin-top: 12px;
  margin-bottom: 12px;
}
.my-4 {
  margin-top: 16px;
  margin-bottom: 16px;
}
.my-5 {
  margin-top: 20px;
  margin-bottom: 20px;
}
.my-6 {
  margin-top: 24px;
  margin-bottom: 24px;
}
.my-7 {
  margin-top: 28px;
  margin-bottom: 28px;
}
.my-8 {
  margin-top: 32px;
  margin-bottom: 32px;
}
.my-9 {
  margin-top: 36px;
  margin-bottom: 36px;
}
.my-10 {
  margin-top: 40px;
  margin-bottom: 40px;
}
.my-11 {
  margin-top: 44px;
  margin-bottom: 44px;
}
.my-12 {
  margin-top: 48px;
  margin-bottom: 48px;
}
.my-13 {
  margin-top: 52px;
  margin-bottom: 52px;
}
.my-14 {
  margin-top: 56px;
  margin-bottom: 56px;
}
.my-15 {
  margin-top: 60px;
  margin-bottom: 60px;
}
.my-16 {
  margin-top: 64px;
  margin-bottom: 64px;
}
.my-17 {
  margin-top: 68px;
  margin-bottom: 68px;
}
.my-18 {
  margin-top: 72px;
  margin-bottom: 72px;
}
.my-19 {
  margin-top: 76px;
  margin-bottom: 76px;
}
.my-20 {
  margin-top: 80px;
  margin-bottom: 80px;
}
.my-21 {
  margin-top: 84px;
  margin-bottom: 84px;
}
.my-22 {
  margin-top: 88px;
  margin-bottom: 88px;
}
.my-23 {
  margin-top: 92px;
  margin-bottom: 92px;
}
.my-24 {
  margin-top: 96px;
  margin-bottom: 96px;
}
.my-25 {
  margin-top: 100px;
  margin-bottom: 100px;
}
.my-26 {
  margin-top: 104px;
  margin-bottom: 104px;
}
.my-27 {
  margin-top: 108px;
  margin-bottom: 108px;
}
.my-28 {
  margin-top: 112px;
  margin-bottom: 112px;
}
.my-29 {
  margin-top: 116px;
  margin-bottom: 116px;
}
.my-30 {
  margin-top: 120px;
  margin-bottom: 120px;
}

/* Classes de margin com o nome "px-valor" */
.px-1 {
  margin-left: 4px;
  margin-right: 4px;
}
.mx-2 {
  margin-left: 8px;
  margin-right: 8px;
}
.mx-3 {
  margin-left: 12px;
  margin-right: 12px;
}
.mx-4 {
  margin-left: 16px;
  margin-right: 16px;
}
.mx-5 {
  margin-left: 20px;
  margin-right: 20px;
}
.mx-6 {
  margin-left: 24px;
  margin-right: 24px;
}
.mx-7 {
  margin-left: 28px;
  margin-right: 28px;
}
.mx-8 {
  margin-left: 32px;
  margin-right: 32px;
}
.mx-9 {
  margin-left: 36px;
  margin-right: 36px;
}
.mx-10 {
  margin-left: 40px;
  margin-right: 40px;
}
.mx-11 {
  margin-left: 44px;
  margin-right: 44px;
}
.mx-12 {
  margin-left: 48px;
  margin-right: 48px;
}
.mx-13 {
  margin-left: 52px;
  margin-right: 52px;
}
.mx-14 {
  margin-left: 56px;
  margin-right: 56px;
}
.mx-15 {
  margin-left: 60px;
  margin-right: 60px;
}
.mx-16 {
  margin-left: 64px;
  margin-right: 64px;
}
.mx-17 {
  margin-left: 68px;
  margin-right: 68px;
}
.mx-18 {
  margin-left: 72px;
  margin-right: 72px;
}
.mx-19 {
  margin-left: 76px;
  margin-right: 76px;
}
.mx-20 {
  margin-left: 80px;
  margin-right: 80px;
}
.mx-21 {
  margin-left: 84px;
  margin-right: 84px;
}
.mx-22 {
  margin-left: 88px;
  margin-right: 88px;
}
.mx-23 {
  margin-left: 92px;
  margin-right: 92px;
}
.mx-24 {
  margin-left: 96px;
  margin-right: 96px;
}
.mx-25 {
  margin-left: 100px;
  margin-right: 100px;
}
.mx-26 {
  margin-left: 104px;
  margin-right: 104px;
}
.mx-27 {
  margin-left: 108px;
  margin-right: 108px;
}
.mx-28 {
  margin-left: 112px;
  margin-right: 112px;
}
.mx-29 {
  margin-left: 116px;
  margin-right: 116px;
}
.mx-30 {
  margin-left: 120px;
  margin-right: 120px;
}

/* Margin Porcentagem */
.m-1P {
  margin: 4%;
}

.m-2P {
  margin: 8%;
}

.m-3P {
  margin: 12%;
}

/* Border radius */
.rounded-1 {
  border-radius: 4px;
}

.rounded-2 {
  border-radius: 8px;
}

.rounded-3 {
  border-radius: 12px;
}

.rounded-4 {
  border-radius: 16px;
}

.rounded-5 {
  border-radius: 20px;
}

.rounded-6 {
  border-radius: 24px;
}
.rounded-50 {
  border-radius: 50px;
}

.rounded-full {
  border-radius: 50%;
}

/* Shadow */
.shadow-sm {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.shadow-md {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.shadow-lg {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* Flex container */
.flex {
  display: flex;
}

/* Flex direction */
.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

/* Flex wrap */
.flex-wrap {
  flex-wrap: wrap;
}

/* Justify content */
.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

/* Align items */
.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

/* Align content */
.content-start {
  align-content: flex-start;
}

.content-end {
  align-content: flex-end;
}

.content-center {
  align-content: center;
}

.content-between {
  align-content: space-between;
}

.content-around {
  align-content: space-around;
}

.content-stretch {
  align-content: stretch;
}

/* Flex item */
.flex-1 {
  flex: 1;
}

.flex-auto {
  flex: auto;
}

.flex-initial {
  flex: initial;
}

.flex-none {
  flex: none;
}

/* Align self */
.self-auto {
  align-self: auto;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-stretch {
  align-self: stretch;
}

.gap-1 {
  gap: 4px;
}

.gap-2 {
  gap: 8px;
}

.gap-3 {
  gap: 16px;
}

.gap-4 {
  gap: 24px;
}

.gap-5 {
  gap: 32px;
}
.gap-6 {
  gap: 40px;
}
.gap-7 {
  gap: 48px;
}
.gap-8 {
  gap: 56px;
}
.gap-9 {
  gap: 64px;
}
.gap-10 {
  gap: 72px;
}
.gap-11 {
  gap: 80px;
}
.gap-12 {
  gap: 88px;
}
.gap-13 {
  gap: 96px;
}
.gap-14 {
  gap: 104px;
}
.gap-15 {
  gap: 112px;
}

.grid {
  display: grid;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.grid-cols-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.grid-cols-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.grid-cols-11 {
  grid-template-columns: repeat(11, minmax(0, 1fr));
}

.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid-cols-none {
  grid-template-columns: none;
}

/* Grid items */
.item {
  grid-column: auto;
  grid-row: auto;
}

.grid-item-1 {
  grid-column: span 1 / span 1;
  width: 100%;
}
.grid-item-2 {
  grid-column: span 2 / span 2;
  width: 100%;
}
.grid-item-3 {
    grid-column: span 3 / span 3;
  width: 100%;
}
.grid-item-4 {
  grid-column: span 4 / span 4;
  width: 100%;
}
.grid-item-5 {
    grid-column: span 5 / span 5;
  width: 100%;
}
.grid-item-6 {
  grid-column: span 6 / span 6;
  width: 100%;
}
.grid-item-7 {
    grid-column: span 7 / span 7;
  width: 100%;
}
.grid-item-8 {
    grid-column: span 8 / span 8;
  width: 100%;
}
.grid-item-9 {
  grid-column: span 9 / span 9;
  width: 100%;
}
.grid-item-10 {
  grid-column: span 10 / span 10;
  width: 100%;
}
.grid-item-11 {
  grid-column: span 11 / span 11;
  width: 100%;
}
.grid-item-12 {
  grid-column: span 12 / span 12;
  width: 100%;
}
/* Ordem */
.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.order-3 {
  order: 3;
}
.order-4 {
  order: 4;
}
.order-5 {
  order: 5;
}
.order-6 {
  order: 6;
}
.order-7 {
  order: 7;
}
.order-8 {
  order: 8;
}
.order-9 {
  order: 9;
}
.order-10 {
  order: 10;
}
.order-first {
  order: -9999;
}
.order-last {
  order: 9999;
}
.order-none {
  order: 0;
}

/* Width Height */
/* Classes para largura em pixels */
/* Classes para largura em porcentagem */
.w-1 {
  width: 10%;
}
.w-2 {
  width: 20%;
}
.w-3 {
  width: 30%;
}
.w-4 {
  width: 40%;
}
.w-5 {
  width: 50%;
}
.w-6 {
  width: 60%;
}
.w-7 {
  width: 70%;
}
.w-8 {
  width: 80%;
}
.w-9 {
  width: 90%;
}
.w-full {
  width: 100%;
}
.w-auto {
  width: auto;
}
.w-fit-content {
  width: fit-content;
}

/* Classes para altura em pixels */
.h-1 {
  height: 12px;
}
.h-2 {
  height: 24px;
}
.h-3 {
  height: 36px;
}
.h-4 {
  height: 48px;
}
.h-5 {
  height: 60px;
}
.h-6 {
  height: 72px;
}
.h-7 {
  height: 84px;
}
.h-8 {
  height: 96px;
}
.h-9 {
  height: 108px;
}
.h-full {
  height: 100%;
}
.h-screen {
  height: 100vh;
}
.h-fit-content {
  height: fit-content;
}

/* Classes para posição */
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.static {
  position: static;
}
.sticky {
  position: sticky;
}
/* Classes para posição */
.top-0 {
  top: 0;
}
.right-0 {
  right: 0;
}
.bottom-0 {
  bottom: 0;
}
.left-0 {
  left: 0;
}

/* Classes para overflow */
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-visible {
  overflow: visible;
}
.overflow-scroll {
  overflow: scroll;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.overflow-x-visible {
  overflow-x: visible;
}
.overflow-x-scroll {
  overflow-x: scroll;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-y-hidden {
  overflow-y: hidden;
}
.overflow-y-visible {
  overflow-y: visible;
}
.overflow-y-scroll {
  overflow-y: scroll;
}

/* Classes para font-size */
.text-xs {
  font-size: 0.75rem;
}
.text-sm {
  font-size: 0.875rem;
}
.text-base {
  font-size: 1rem;
}
.text-lg {
  font-size: 1.125rem;
}
.text-xl {
  font-size: 1.25rem;
}
.text-2xl {
  font-size: 1.5rem;
}
.text-3xl {
  font-size: 1.875rem;
}
.text-4xl {
  font-size: 2.5rem;
}
.text-5xl {
  font-size: 3rem;
}
.text-6xl {
  font-size: 4rem;
}
.text-7xl {
  font-size: 5rem;
}
.text-8xl {
  font-size: 6rem;
}
.text-9xl {
  font-size: 6.5rem;
}

/* Classes para font-weight */
.font-thin {
  font-weight: 100;
}
.font-extralight {
  font-weight: 200;
}
.font-light {
  font-weight: 300;
}
.font-normal {
  font-weight: 400;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.font-bold {
  font-weight: 700;
}
.font-extrabold {
  font-weight: 800;
}
.font-black {
  font-weight: 900;
}

/* BACKGROUND */

.bg-primary {
  background-color: var(--color-primary);
}
.bg-secondary {
  background-color: var(--color-secondary);
}
.bg-white {
  background-color: #fff;
}
.bg-black {
  background-color: #000;
}
/* Cores neutras */
.bg-neutral-100 { background-color: var(--color-neutral-100); }
.bg-neutral-200 { background-color: var(--color-neutral-200); }
.bg-neutral-300 { background-color: var(--color-neutral-300); }
.bg-neutral-400 { background-color: var(--color-neutral-400); }
.bg-neutral-500 { background-color: var(--color-neutral-500); }
.bg-neutral-600 { background-color: var(--color-neutral-600); }
.bg-neutral-700 { background-color: var(--color-neutral-700); }
.bg-neutral-800 { background-color: var(--color-neutral-800); }
.bg-neutral-900 { background-color: var(--color-neutral-900); }

/* Cores vermelhas */
.bg-red-100 { background-color: var(--color-red-100); }
.bg-red-200 { background-color: var(--color-red-200); }
.bg-red-300 { background-color: var(--color-red-300); }
.bg-red-400 { background-color: var(--color-red-400); }
.bg-red-500 { background-color: var(--color-red-500); }
.bg-red-600 { background-color: var(--color-red-600); }
.bg-red-700 { background-color: var(--color-red-700); }
.bg-red-800 { background-color: var(--color-red-800); }
.bg-red-900 { background-color: var(--color-red-900); }

/* Cores amarelas */
.bg-yellow-100 { background-color: var(--color-yellow-100); }
.bg-yellow-200 { background-color: var(--color-yellow-200); }
.bg-yellow-300 { background-color: var(--color-yellow-300); }
.bg-yellow-400 { background-color: var(--color-yellow-400); }
.bg-yellow-500 { background-color: var(--color-yellow-500); }
.bg-yellow-600 { background-color: var(--color-yellow-600); }
.bg-yellow-700 { background-color: var(--color-yellow-700); }
.bg-yellow-800 { background-color: var(--color-yellow-800); }
.bg-yellow-900 { background-color: var(--color-yellow-900); }

/* Cores verdes */
.bg-green-100 { background-color: var(--color-green-100); }
.bg-green-200 { background-color: var(--color-green-200); }
.bg-green-300 { background-color: var(--color-green-300); }
.bg-green-400 { background-color: var(--color-green-400); }
.bg-green-500 { background-color: var(--color-green-500); }
.bg-green-600 { background-color: var(--color-green-600); }
.bg-green-700 { background-color: var(--color-green-700); }
.bg-green-800 { background-color: var(--color-green-800); }
.bg-green-900 { background-color: var(--color-green-900); }

/* Cores azuis */
.bg-blue-100 { background-color: var(--color-blue-100); }
.bg-blue-200 { background-color: var(--color-blue-200); }
.bg-blue-300 { background-color: var(--color-blue-300); }
.bg-blue-400 { background-color: var(--color-blue-400); }
.bg-blue-500 { background-color: var(--color-blue-500); }
.bg-blue-600 { background-color: var(--color-blue-600); }
.bg-blue-700 { background-color: var(--color-blue-700); }
.bg-blue-800 { background-color: var(--color-blue-800); }
.bg-blue-900 { background-color: var(--color-blue-900); }

/* Cores roxas */
.bg-purple-100 { background-color: var(--color-purple-100); }
.bg-purple-200 { background-color: var(--color-purple-200); }
.bg-purple-300 { background-color: var(--color-purple-300); }
.bg-purple-400 { background-color: var(--color-purple-400); }
.bg-purple-500 { background-color: var(--color-purple-500); }
.bg-purple-600 { background-color: var(--color-purple-600); }
.bg-purple-700 { background-color: var(--color-purple-700); }
.bg-purple-800 { background-color: var(--color-purple-800); }
.bg-purple-900 { background-color: var(--color-purple-900); }

/* Cores rosas */
.bg-pink-100 { background-color: var(--color-pink-100); }
.bg-pink-200 { background-color: var(--color-pink-200); }
.bg-pink-300 { background-color: var(--color-pink-300); }
.bg-pink-400 { background-color: var(--color-pink-400); }
.bg-pink-500 { background-color: var(--color-pink-500); }
.bg-pink-600 { background-color: var(--color-pink-600); }
.bg-pink-700 { background-color: var(--color-pink-700); }
.bg-pink-800 { background-color: var(--color-pink-800); }
.bg-pink-900 { background-color: var(--color-pink-900); }

/* Cores laranjas */
.bg-orange-100 { background-color: var(--color-orange-100); }
.bg-orange-200 { background-color: var(--color-orange-200); }
.bg-orange-300 { background-color: var(--color-orange-300); }
.bg-orange-400 { background-color: var(--color-orange-400); }
.bg-orange-500 { background-color: var(--color-orange-500); }
.bg-orange-600 { background-color: var(--color-orange-600); }
.bg-orange-700 { background-color: var(--color-orange-700); }
.bg-orange-800 { background-color: var(--color-orange-800); }
.bg-orange-900 { background-color: var(--color-orange-900); }

.bg-custom{ background-color: var(--color-custom); }

.text-primary {
  color: var(--color-secondary);
}
.text-secondary {
  color: var(--color-secondary);
}
.text-white {
  color: #fff;
}
.text-black {
  color: #000;
}
.text-color {
  color: var(--text-color);
}
.text-color-secondary {
  color: var(--text-color-secondary);
}

/* Cores neutras */
.text-neutral-100 { color: var(--color-neutral-100); }
.text-neutral-200 { color: var(--color-neutral-200); }
.text-neutral-300 { color: var(--color-neutral-300); }
.text-neutral-400 { color: var(--color-neutral-400); }
.text-neutral-500 { color: var(--color-neutral-500); }
.text-neutral-600 { color: var(--color-neutral-600); }
.text-neutral-700 { color: var(--color-neutral-700); }
.text-neutral-800 { color: var(--color-neutral-800); }
.text-neutral-900 { color: var(--color-neutral-900); }

/* Cores vermelhas */
.text-red-100 { color: var(--color-red-100); }
.text-red-200 { color: var(--color-red-200); }
.text-red-300 { color: var(--color-red-300); }
.text-red-400 { color: var(--color-red-400); }
.text-red-500 { color: var(--color-red-500); }
.text-red-600 { color: var(--color-red-600); }
.text-red-700 { color: var(--color-red-700); }
.text-red-800 { color: var(--color-red-800); }
.text-red-900 { color: var(--color-red-900); }

/* Cores amarelas */
.text-yellow-100 { color: var(--color-yellow-100); }
.text-yellow-200 { color: var(--color-yellow-200); }
.text-yellow-300 { color: var(--color-yellow-300); }
.text-yellow-400 { color: var(--color-yellow-400); }
.text-yellow-500 { color: var(--color-yellow-500); }
.text-yellow-600 { color: var(--color-yellow-600); }
.text-yellow-700 { color: var(--color-yellow-700); }
.text-yellow-800 { color: var(--color-yellow-800); }
.text-yellow-900 { color: var(--color-yellow-900); }

/* Cores verdes */
.text-green-100 { color: var(--color-green-100); }
.text-green-200 { color: var(--color-green-200); }
.text-green-300 { color: var(--color-green-300); }
.text-green-400 { color: var(--color-green-400); }
.text-green-500 { color: var(--color-green-500); }
.text-green-600 { color: var(--color-green-600); }
.text-green-700 { color: var(--color-green-700); }
.text-green-800 { color: var(--color-green-800); }
.text-green-900 { color: var(--color-green-900); }

/* Cores azuis */
.text-blue-100 { color: var(--color-blue-100); }
.text-blue-200 { color: var(--color-blue-200); }
.text-blue-300 { color: var(--color-blue-300); }
.text-blue-400 { color: var(--color-blue-400); }
.text-blue-500 { color: var(--color-blue-500); }
.text-blue-600 { color: var(--color-blue-600); }
.text-blue-700 { color: var(--color-blue-700); }
.text-blue-800 { color: var(--color-blue-800); }
.text-blue-900 { color: var(--color-blue-900); }

/* Cores roxas */
.text-purple-100 { color: var(--color-purple-100); }
.text-purple-200 { color: var(--color-purple-200); }
.text-purple-300 { color: var(--color-purple-300); }
.text-purple-400 { color: var(--color-purple-400); }
.text-purple-500 { color: var(--color-purple-500); }
.text-purple-600 { color: var(--color-purple-600); }
.text-purple-700 { color: var(--color-purple-700); }
.text-purple-800 { color: var(--color-purple-800); }
.text-purple-900 { color: var(--color-purple-900); }

/* Cores rosas */
.text-pink-100 { color: var(--color-pink-100); }
.text-pink-200 { color: var(--color-pink-200); }
.text-pink-300 { color: var(--color-pink-300); }
.text-pink-400 { color: var(--color-pink-400); }
.text-pink-500 { color: var(--color-pink-500); }
.text-pink-600 { color: var(--color-pink-600); }
.text-pink-700 { color: var(--color-pink-700); }
.text-pink-800 { color: var(--color-pink-800); }
.text-pink-900 { color: var(--color-pink-900); }

/* Cores laranjas */
.text-orange-100 { color: var(--color-orange-100); }
.text-orange-200 { color: var(--color-orange-200); }
.text-orange-300 { color: var(--color-orange-300); }
.text-orange-400 { color: var(--color-orange-400); }
.text-orange-500 { color: var(--color-orange-500); }
.text-orange-600 { color: var(--color-orange-600); }
.text-orange-700 { color: var(--color-orange-700); }
.text-orange-800 { color: var(--color-orange-800); }
.text-orange-900 { color: var(--color-orange-900); }




.opacity-0 {
  opacity: 0;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-100 {
  opacity: 1;
}

.leading-none {
  line-height: 1;
}

.leading-tight {
  line-height: 1.25;
}

.leading-normal {
  line-height: 1.5;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-loose {
  line-height: 2;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.inline-flex {
  display: inline-flex;
}

.inline-grid {
  display: inline-grid;
}

.table {
  display: table;
}

.table-caption {
  display: table-caption;
}

.table-cell {
  display: table-cell;
}

.table-column {
  display: table-column;
}

.table-column-group {
  display: table-column-group;
}

.table-footer-group {
  display: table-footer-group;
}

.table-header-group {
  display: table-header-group;
}

.table-row {
  display: table-row;
}

.table-row-group {
  display: table-row-group;
}

.hidden {
  display: none !important;
}

.img-container img, .img-container picture source, .img-container picture img {
  display: block;
  width: 100%;
  object-fit: cover;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

.hover\:bg-primary:hover{
  background-color: var(--color-primary-light)
}
.hover\:bg-secondary:hover{
  background-color: var(--color-secondary-light)
}

.hover\:text-color:hover{
  --color: var(--color-primary);
  color: var(--color);
}
.hover\:bg-color:hover{
  --color: var(--color-primary);
  background-color: var(--color);
}

.hover\:text-color:hover{
  color: var(--color) !important;
}

.hover\:scale-sm:hover{
  transform: scale(1.025) perspective(2px);
  transform-origin: center;
  transition: transform linear .3s;
}
.hover\:scale-md:hover{
  transform: scale(1.05) perspective(2px);
  transform-origin: center;
  transition: transform linear .3s;
}
.hover\:scale-lg:hover{
  transform: scale(1.1) perspective(2px);
  transform-origin: center;
  transition: transform linear .3s;
}

/* Duração da transição */
.transition {
  transition-duration: 300ms;
}

/* Tipo de transição */
.transition-linear {
  transition-timing-function: linear;
}

.transition-ease-in {
  transition-timing-function: ease-in;
}

.transition-ease-out {
  transition-timing-function: ease-out;
}

.transition-ease-in-out {
  transition-timing-function: ease-in-out;
}


/* Classes para animações com delay em segundos */
.animation-delay {
  animation-delay: var(--for) !important;
}


.aspect-ratio-custom{
  aspect-ratio: var(--aspect-ratio-custom);
}

.ellipsis{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.max-lines{
  --max-lines: 2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: var(--max-lines); /* number of lines to show */
          line-clamp: var(--max-lines); 
  -webkit-box-orient: vertical;
}

.pointer{
  cursor: pointer;
}

/* 2xl */
@media screen and (max-width: 1536px) {
  .xxl-grid {
    display: grid;
  }
  .xxl-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  
  .xxl-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .xxl-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  
  .xxl-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  
  .xxl-grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  
  .xxl-grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  
  .xxl-grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  
  .xxl-grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  
  .xxl-grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  
  .xxl-grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  
  .xxl-grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  
  .xxl-grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  
  .xxl-grid-cols-none {
    grid-template-columns: none;
  }
  
  /* Grid items */
  .xxl-item {
    grid-column: auto;
    grid-row: auto;
  }
  
  .xxl-grid-item-1 {
    grid-column: span 1 / span 1;
    width: 100%;
  }
  .xxl-grid-item-2 {
    grid-column: span 2 / span 2;
    width: 100%;
  }
  .xxl-grid-item-3 {
    grid-column: span 3 / span 3;
    width: 100%;
  }
  .xxl-grid-item-4 {
    grid-column: span 4 / span 4;
    width: 100%;
  }
  .xxl-grid-item-5 {
    grid-column: span 5 / span 5;
    width: 100%;
  }
  .xxl-grid-item-6 {
    grid-column: span 6 / span 6;
    width: 100%;
  }
  .xxl-grid-item-7 {
    grid-column: span 7 / span 7;
    width: 100%;
  }
  .xxl-grid-item-8 {
    grid-column: span 8 / span 8;
    width: 100%;
  }
  .xxl-grid-item-9 {
    grid-column: span 9 / span 9;
    width: 100%;
  }
  .xxl-grid-item-10 {
    grid-column: span 10 / span 10;
    width: 100%;
  }
  .xxl-grid-item-11 {
    grid-column: span 11 / span 11;
    width: 100%;
  }
  .xxl-grid-item-12 {
    grid-column: span 12 / span 12;
    width: 100%;
  }
  /* Ordem */
.xxl-order-1 {
  order: 1;
}
.xxl-order-2 {
  order: 2;
}
.xxl-order-3 {
  order: 3;
}
.xxl-order-4 {
  order: 4;
}
.xxl-order-5 {
  order: 5;
}
.xxl-order-6 {
  order: 6;
}
.xxl-order-7 {
  order: 7;
}
.xxl-order-8 {
  order: 8;
}
.xxl-order-9 {
  order: 9;
}
.xxl-order-10 {
  order: 10;
}
.xxl-order-first {
  order: -9999;
}
.xxl-order-last {
  order: 9999;
}
.xxl-order-none {
  order: 0;
}
  /* Classes de padding com o nome "p-valor" */
.xxl-p-0{
  padding: 0;
}
  .xxl-p-1 {
  padding: 4px;
}

.xxl-p-2 {
  padding: 8px;
}

.xxl-p-3 {
  padding: 12px;
}

.xxl-p-4 {
  padding: 16px;
}

.xxl-p-5 {
  padding: 20px;
}

.xxl-p-6 {
  padding: 24px;
}

.xxl-p-7 {
  padding: 28px;
}

.xxl-p-8 {
  padding: 32px;
}

.xxl-p-9 {
  padding: 36px;
}

.xxl-p-10 {
  padding: 40px;
}

.xxl-p-11 {
  padding: 44px;
}

.xxl-p-12 {
  padding: 48px;
}

.xxl-p-13 {
  padding: 52px;
}

.xxl-p-14 {
  padding: 56px;
}

.xxl-p-15 {
  padding: 60px;
}

.xxl-p-16 {
  padding: 64px;
}

.xxl-p-17 {
  padding: 68px;
}

.xxl-p-18 {
  padding: 72px;
}

.xxl-p-19 {
  padding: 76px;
}

.xxl-p-20 {
  padding: 80px;
}

.xxl-p-21 {
  padding: 84px;
}

.xxl-p-22 {
  padding: 88px;
}

.xxl-p-23 {
  padding: 92px;
}

.xxl-p-24 {
  padding: 96px;
}

.xxl-p-25 {
  padding: 100px;
}

.xxl-p-26 {
  padding: 104px;
}

.xxl-p-27 {
  padding: 108px;
}

.xxl-p-28 {
  padding: 112px;
}

.xxl-p-29 {
  padding: 116px;
}

.xxl-p-30 {
  padding: 120px;
}

/* Classes de padding com o nome "p-posicao-valor" */

.xxl-pt-1 {
  padding-top: 4px;
}

.xxl-pt-2 {
  padding-top: 8px;
}

.xxl-pt-3 {
  padding-top: 12px;
}

.xxl-pt-4 {
  padding-top: 16px;
}

.xxl-pt-5 {
  padding-top: 20px;
}

.xxl-pt-6 {
  padding-top: 24px;
}

.xxl-pt-7 {
  padding-top: 28px;
}

.xxl-pt-8 {
  padding-top: 32px;
}

.xxl-pt-9 {
  padding-top: 36px;
}

.xxl-pt-10 {
  padding-top: 40px;
}

.xxl-pt-11 {
  padding-top: 44px;
}

.xxl-pt-12 {
  padding-top: 48px;
}

.xxl-pt-13 {
  padding-top: 52px;
}

.xxl-pt-14 {
  padding-top: 56px;
}

.xxl-pt-15 {
  padding-top: 60px;
}

.xxl-pt-16 {
  padding-top: 64px;
}

.xxl-pt-17 {
  padding-top: 68px;
}

.xxl-pt-18 {
  padding-top: 72px;
}

.xxl-pt-19 {
  padding-top: 76px;
}

.xxl-pt-20 {
  padding-top: 80px;
}

.xxl-pt-21 {
  padding-top: 84px;
}

.xxl-pt-22 {
  padding-top: 88px;
}

.xxl-pt-23 {
  padding-top: 92px;
}

.xxl-pt-24 {
  padding-top: 96px;
}

.xxl-pt-25 {
  padding-top: 100px;
}

.xxl-pt-26 {
  padding-top: 104;
}

.xxl-pt-27 {
  padding-top: 108px;
}

.xxl-pt-28 {
  padding-top: 112px;
}

.xxl-pt-29 {
  padding-top: 116px;
}

.xxl-pt-30 {
  padding-top: 120px;
}

.xxl-pr-1 {
  padding-right: 4px;
}

.xxl-pr-2 {
  padding-right: 8px;
}

.xxl-pr-3 {
  padding-right: 12px;
}

.xxl-pr-4 {
  padding-right: 16px;
}

.xxl-pr-5 {
  padding-right: 20px;
}

.xxl-pr-6 {
  padding-right: 24px;
}

.xxl-pr-7 {
  padding-right: 28px;
}

.xxl-pr-8 {
  padding-right: 32px;
}

.xxl-pr-9 {
  padding-right: 36px;
}

.xxl-pr-10 {
  padding-right: 40px;
}

.xxl-pr-11 {
  padding-right: 44px;
}

.xxl-pr-12 {
  padding-right: 48px;
}

.xxl-pr-13 {
  padding-right: 52px;
}

.xxl-pr-14 {
  padding-right: 56px;
}

.xxl-pr-15 {
  padding-right: 60px;
}

.xxl-pr-16 {
  padding-right: 64px;
}

.xxl-pr-17 {
  padding-right: 68px;
}

.xxl-pr-18 {
  padding-right: 72px;
}

.xxl-pr-19 {
  padding-right: 76px;
}

.xxl-pr-20 {
  padding-right: 80px;
}

.xxl-pr-21 {
  padding-right: 84px;
}

.xxl-pr-22 {
  padding-right: 88px;
}

.xxl-pr-23 {
  padding-right: 92px;
}

.xxl-pr-24 {
  padding-right: 96px;
}

.xxl-pr-25 {
  padding-right: 100px;
}

.xxl-pr-26 {
  padding-right: 104px;
}

.xxl-pr-27 {
  padding-right: 108px;
}

.xxl-pr-28 {
  padding-right: 112px;
}

.xxl-pr-29 {
  padding-right: 116px;
}

.xxl-pr-30 {
  padding-right: 120px;
}

.xxl-pb-1 { padding-bottom: 4px; }
.xxl-pb-2 { padding-bottom: 8px; }
.xxl-pb-3 { padding-bottom: 12px; }
.xxl-pb-4 { padding-bottom: 16px; }
.xxl-pb-5 { padding-bottom: 20px; }
.xxl-pb-6 { padding-bottom: 24px; }
.xxl-pb-7 { padding-bottom: 28px; }
.xxl-pb-8 { padding-bottom: 32px; }
.xxl-pb-9 { padding-bottom: 36px; }
.xxl-pb-10 { padding-bottom: 40px; }
.xxl-pb-11 { padding-bottom: 44px; }
.xxl-pb-12 { padding-bottom: 48px; }
.xxl-pb-13 { padding-bottom: 52px; }
.xxl-pb-14 { padding-bottom: 56px; }
.xxl-pb-15 { padding-bottom: 60px; }
.xxl-pb-16 { padding-bottom: 64px; }
.xxl-pb-17 { padding-bottom: 68px; }
.xxl-pb-18 { padding-bottom: 72px; }
.xxl-pb-19 { padding-bottom: 76px; }
.xxl-pb-20 { padding-bottom: 80px; }
.xxl-pb-21 { padding-bottom: 84px; }
.xxl-pb-22 { padding-bottom: 88px; }
.xxl-pb-23 { padding-bottom: 92px; }
.xxl-pb-24 { padding-bottom: 96px; }
.xxl-pb-25 { padding-bottom: 100px; }
.xxl-pb-26 { padding-bottom: 104px; }
.xxl-pb-27 { padding-bottom: 108px; }
.xxl-pb-28 { padding-bottom: 112px; }
.xxl-pb-29 { padding-bottom: 116px; }
.xxl-pb-30 { padding-bottom: 120px; }

.xxl-pl-1 { padding-left: 4px; }
.xxl-pl-2 { padding-left: 8px; }
.xxl-pl-3 { padding-left: 12px; }
.xxl-pl-4 { padding-left: 16px; }
.xxl-pl-5 { padding-left: 20px; }
.xxl-pl-6 { padding-left: 24px; }
.xxl-pl-7 { padding-left: 28px; }
.xxl-pl-8 { padding-left: 32px; }
.xxl-pl-9 { padding-left: 36px; }
.xxl-pl-10 { padding-left: 40px; }
.xxl-pl-11 { padding-left: 44px; }
.xxl-pl-12 { padding-left: 48px; }
.xxl-pl-13 { padding-left: 52px; }
.xxl-pl-14 { padding-left: 56px; }
.xxl-pl-15 { padding-left: 60px; }
.xxl-pl-16 { padding-left: 64px; }
.xxl-pl-17 { padding-left: 68px; }
.xxl-pl-18 { padding-left: 72px; }
.xxl-pl-19 { padding-left: 76px; }
.xxl-pl-20 { padding-left: 80px; }
.xxl-pl-21 { padding-left: 84px; }
.xxl-pl-22 { padding-left: 88px; }
.xxl-pl-23 { padding-left: 92px; }
.xxl-pl-24 { padding-left: 96px; }
.xxl-pl-25 { padding-left: 100px; }
.xxl-pl-26 { padding-left: 104px; }
.xxl-pl-27 { padding-left: 108px; }
.xxl-pl-28 { padding-left: 112px; }
.xxl-pl-29 { padding-left: 116px; }
.xxl-pl-30 { padding-left: 120px; }

/* Classes de padding vertical com o nome "py-valor" */
.xxl-py-1 {
  padding-top: 4px;
  padding-bottom: 4px;
}
.xxl-py-2 {
  padding-top: 8px;
  padding-bottom: 8px;
}
.xxl-py-3 {
  padding-top: 12px;
  padding-bottom: 12px;
}
.xxl-py-4 {
  padding-top: 16px;
  padding-bottom: 16px;
}
.xxl-py-5 {
  padding-top: 20px;
  padding-bottom: 20px;
}
.xxl-py-6 {
  padding-top: 24px;
  padding-bottom: 24px;
}
.xxl-py-7 {
  padding-top: 28px;
  padding-bottom: 28px;
}
.xxl-py-8 {
  padding-top: 32px;
  padding-bottom: 32px;
}
.xxl-py-9 {
  padding-top: 36px;
  padding-bottom: 36px;
}
.xxl-py-10 {
  padding-top: 40px;
  padding-bottom: 40px;
}
.xxl-py-11 {
  padding-top: 44px;
  padding-bottom: 44px;
}
.xxl-py-12 {
  padding-top: 48px;
  padding-bottom: 48px;
}
.xxl-py-13 {
  padding-top: 52px;
  padding-bottom: 52px;
}
.xxl-py-14 {
  padding-top: 56px;
  padding-bottom: 56px;
}
.xxl-py-15 {
  padding-top: 60px;
  padding-bottom: 60px;
}
.xxl-py-16 {
  padding-top: 64px;
  padding-bottom: 64px;
}
.xxl-py-17 {
  padding-top: 68px;
  padding-bottom: 68px;
}
.xxl-py-18 {
  padding-top: 72px;
  padding-bottom: 72px;
}
.xxl-py-19 {
  padding-top: 76px;
  padding-bottom: 76px;
}
.xxl-py-20 {
  padding-top: 80px;
  padding-bottom: 80px;
}
.xxl-py-21 {
  padding-top: 84px;
  padding-bottom: 84px;
}
.xxl-py-22 {
  padding-top: 88px;
  padding-bottom: 88px;
}
.xxl-py-23 {
  padding-top: 92px;
  padding-bottom: 92px;
}
.xxl-py-24 {
  padding-top: 96px;
  padding-bottom: 96px;
}
.xxl-py-25 {
  padding-top: 100px;
  padding-bottom: 100px;
}
.xxl-py-26 {
  padding-top: 104px;
  padding-bottom: 104px;
}
.xxl-py-27 {
  padding-top: 108px;
  padding-bottom: 108px;
}
.xxl-py-28 {
  padding-top: 112px;
  padding-bottom: 112px;
}
.xxl-py-29 {
  padding-top: 116px;
  padding-bottom: 116px;
}
.xxl-py-30 {
  padding-top: 120px;
  padding-bottom: 120px;
}

/* Classes de padding com o nome "px-valor" */
.xxl-px-1 {
  padding-left: 4px;
  padding-right: 4px;
}
.xxl-px-2 {
  padding-left: 8px;
  padding-right: 8px;
}
.xxl-px-3 {
  padding-left: 12px;
  padding-right: 12px;
}
.xxl-px-4 {
  padding-left: 16px;
  padding-right: 16px;
}
.xxl-px-5 {
  padding-left: 20px;
  padding-right: 20px;
}
.xxl-px-6 {
  padding-left: 24px;
  padding-right: 24px;
}
.xxl-px-7 {
  padding-left: 28px;
  padding-right: 28px;
}
.xxl-px-8 {
  padding-left: 32px;
  padding-right: 32px;
}
.xxl-px-9 {
  padding-left: 36px;
  padding-right: 36px;
}
.xxl-px-10 {
  padding-left: 40px;
  padding-right: 40px;
}
.xxl-px-11 {
  padding-left: 44px;
  padding-right: 44px;
}
.xxl-px-12 {
  padding-left: 48px;
  padding-right: 48px;
}
.xxl-px-13 {
  padding-left: 52px;
  padding-right: 52px;
}
.xxl-px-14 {
  padding-left: 56px;
  padding-right: 56px;
}
.xxl-px-15 {
  padding-left: 60px;
  padding-right: 60px;
}
.xxl-px-16 {
  padding-left: 64px;
  padding-right: 64px;
}
.xxl-px-17 {
  padding-left: 68px;
  padding-right: 68px;
}
.xxl-px-18 {
  padding-left: 72px;
  padding-right: 72px;
}
.xxl-px-19 {
  padding-left: 76px;
  padding-right: 76px;
}
.xxl-px-20 {
  padding-left: 80px;
  padding-right: 80px;
}
.xxl-px-21 {
  padding-left: 84px;
  padding-right: 84px;
}
.xxl-px-22 {
  padding-left: 88px;
  padding-right: 88px;
}
.xxl-px-23 {
  padding-left: 92px;
  padding-right: 92px;
}
.xxl-px-24 {
  padding-left: 96px;
  padding-right: 96px;
}
.xxl-px-25 {
  padding-left: 100px;
  padding-right: 100px;
}
.xxl-px-26 {
  padding-left: 104px;
  padding-right: 104px;
}
.xxl-px-27 {
  padding-left: 108px;
  padding-right: 108px;
}
.xxl-px-28 {
  padding-left: 112px;
  padding-right: 112px;
}
.xxl-px-29 {
  padding-left: 116px;
  padding-right: 116px;
}
.xxl-px-30 {
  padding-left: 120px;
  padding-right: 120px;
}

  /* PADDING PORCENTAGEM */

  .xxl-p-1P {
    padding: 4%;
  }

  .xxl-p-2P {
    padding: 8%;
  }

  .xxl-p-3P {
    padding: 12%;
  }

.xxl-m-1 {
  margin: 4px;
}

.xxl-m-2 {
  margin: 8px;
}

.xxl-m-3 {
  margin: 12px;
}

.xxl-m-4 {
  margin: 16px;
}

.xxl-m-5 {
  margin: 20px;
}

.xxl-m-6 {
  margin: 24px;
}

.xxl-m-7 {
  margin: 28px;
}

.xxl-m-8 {
  margin: 32px;
}

.xxl-m-9 {
  margin: 36px;
}

.xxl-m-10 {
  margin: 40px;
}

.xxl-m-11 {
  margin: 44px;
}

.xxl-m-12 {
  margin: 48px;
}

.xxl-m-13 {
  margin: 52px;
}

.xxl-m-14 {
  margin: 56px;
}

.xxl-m-15 {
  margin: 60px;
}

.xxl-m-16 {
  margin: 64px;
}

.xxl-m-17 {
  margin: 68px;
}

.xxl-m-18 {
  margin: 72px;
}

.xxl-m-19 {
  margin: 76px;
}

.xxl-m-20 {
  margin: 80px;
}

.xxl-m-21 {
  margin: 84px;
}

.xxl-m-22 {
  margin: 88px;
}

.xxl-m-23 {
  margin: 92px;
}

.xxl-m-24 {
  margin: 96px;
}

.xxl-m-25 {
  margin: 100px;
}

.xxl-m-26 {
  margin: 104px;
}

.xxl-m-27 {
  margin: 108px;
}

.xxl-m-28 {
  margin: 112px;
}

.xxl-m-29 {
  margin: 116px;
}

.xxl-m-30 {
  margin: 120px;
}


.xxl-mt-1 {
  margin-top: 4px;
}

.xxl-mt-2 {
  margin-top: 8px;
}

.xxl-mt-3 {
  margin-top: 12px;
}

.xxl-mt-4 {
  margin-top: 16px;
}

.xxl-mt-5 {
  margin-top: 20px;
}

.xxl-mt-6 {
  margin-top: 24px;
}

.xxl-mt-7 {
  margin-top: 28px;
}

.xxl-mt-8 {
  margin-top: 32px;
}

.xxl-mt-9 {
  margin-top: 36px;
}

.xxl-mt-10 {
  margin-top: 40px;
}

.xxl-mt-11 {
  margin-top: 44px;
}

.xxl-mt-12 {
  margin-top: 48px;
}

.xxl-mt-13 {
  margin-top: 52px;
}

.xxl-mt-14 {
  margin-top: 56px;
}

.xxl-mt-15 {
  margin-top: 60px;
}

.xxl-mt-16 {
  margin-top: 64px;
}

.xxl-mt-17 {
  margin-top: 68px;
}

.xxl-mt-18 {
  margin-top: 72px;
}

.xxl-mt-19 {
  margin-top: 76px;
}

.xxl-mt-20 {
  margin-top: 80px;
}

.xxl-mt-21 {
  margin-top: 84px;
}

.xxl-mt-22 {
  margin-top: 88px;
}

.xxl-mt-23 {
  margin-top: 92px;
}

.xxl-mt-24 {
  margin-top: 96px;
}

.xxl-mt-25 {
  margin-top: 100px;
}

.xxl-mt-26 {
  margin-top: 104;
}

.xxl-mt-27 {
  margin-top: 108px;
}

.xxl-mt-28 {
  margin-top: 112px;
}

.xxl-mt-29 {
  margin-top: 116px;
}

.xxl-mt-30 {
  margin-top: 120px;
}

.xxl-mr-1 {
  margin-right: 4px;
}

.xxl-mr-2 {
  margin-right: 8px;
}

.xxl-mr-3 {
  margin-right: 12px;
}

.xxl-mr-4 {
  margin-right: 16px;
}

.xxl-mr-5 {
  margin-right: 20px;
}

.xxl-mr-6 {
  margin-right: 24px;
}

.xxl-mr-7 {
  margin-right: 28px;
}

.xxl-mr-8 {
  margin-right: 32px;
}

.xxl-mr-9 {
  margin-right: 36px;
}

.xxl-mr-10 {
  margin-right: 40px;
}

.xxl-mr-11 {
  margin-right: 44px;
}

.xxl-mr-12 {
  margin-right: 48px;
}

.xxl-mr-13 {
  margin-right: 52px;
}

.xxl-mr-14 {
  margin-right: 56px;
}

.xxl-mr-15 {
  margin-right: 60px;
}

.xxl-mr-16 {
  margin-right: 64px;
}

.xxl-mr-17 {
  margin-right: 68px;
}

.xxl-mr-18 {
  margin-right: 72px;
}

.xxl-mr-19 {
  margin-right: 76px;
}

.xxl-mr-20 {
  margin-right: 80px;
}

.xxl-mr-21 {
  margin-right: 84px;
}

.xxl-mr-22 {
  margin-right: 88px;
}

.xxl-mr-23 {
  margin-right: 92px;
}

.xxl-mr-24 {
  margin-right: 96px;
}

.xxl-mr-25 {
  margin-right: 100px;
}

.xxl-mr-26 {
  margin-right: 104px;
}

.xxl-mr-27 {
  margin-right: 108px;
}

.xxl-mr-28 {
  margin-right: 112px;
}

.xxl-mr-29 {
  margin-right: 116px;
}

.xxl-mr-30 {
  margin-right: 120px;
}

.xxl-mb-1 { margin-bottom: 4px; }
.xxl-mb-2 { margin-bottom: 8px; }
.xxl-mb-3 { margin-bottom: 12px; }
.xxl-mb-4 { margin-bottom: 16px; }
.xxl-mb-5 { margin-bottom: 20px; }
.xxl-mb-6 { margin-bottom: 24px; }
.xxl-mb-7 { margin-bottom: 28px; }
.xxl-mb-8 { margin-bottom: 32px; }
.xxl-mb-9 { margin-bottom: 36px; }
.xxl-mb-10 { margin-bottom: 40px; }
.xxl-mb-11 { margin-bottom: 44px; }
.xxl-mb-12 { margin-bottom: 48px; }
.xxl-mb-13 { margin-bottom: 52px; }
.xxl-mb-14 { margin-bottom: 56px; }
.xxl-mb-15 { margin-bottom: 60px; }
.xxl-mb-16 { margin-bottom: 64px; }
.xxl-mb-17 { margin-bottom: 68px; }
.xxl-mb-18 { margin-bottom: 72px; }
.xxl-mb-19 { margin-bottom: 76px; }
.xxl-mb-20 { margin-bottom: 80px; }
.xxl-mb-21 { margin-bottom: 84px; }
.xxl-mb-22 { margin-bottom: 88px; }
.xxl-mb-23 { margin-bottom: 92px; }
.xxl-mb-24 { margin-bottom: 96px; }
.xxl-mb-25 { margin-bottom: 100px; }
.xxl-mb-26 { margin-bottom: 104px; }
.xxl-mb-27 { margin-bottom: 108px; }
.xxl-mb-28 { margin-bottom: 112px; }
.xxl-mb-29 { margin-bottom: 116px; }
.xxl-mb-30 { margin-bottom: 120px; }

.xxl-ml-1 { margin-left: 4px; }
.xxl-ml-2 { margin-left: 8px; }
.xxl-ml-3 { margin-left: 12px; }
.xxl-ml-4 { margin-left: 16px; }
.xxl-ml-5 { margin-left: 20px; }
.xxl-ml-6 { margin-left: 24px; }
.xxl-ml-7 { margin-left: 28px; }
.xxl-ml-8 { margin-left: 32px; }
.xxl-ml-9 { margin-left: 36px; }
.xxl-ml-10 { margin-left: 40px; }
.xxl-ml-11 { margin-left: 44px; }
.xxl-ml-12 { margin-left: 48px; }
.xxl-ml-13 { margin-left: 52px; }
.xxl-ml-14 { margin-left: 56px; }
.xxl-ml-15 { margin-left: 60px; }
.xxl-ml-16 { margin-left: 64px; }
.xxl-ml-17 { margin-left: 68px; }
.xxl-ml-18 { margin-left: 72px; }
.xxl-ml-19 { margin-left: 76px; }
.xxl-ml-20 { margin-left: 80px; }
.xxl-ml-21 { margin-left: 84px; }
.xxl-ml-22 { margin-left: 88px; }
.xxl-ml-23 { margin-left: 92px; }
.xxl-ml-24 { margin-left: 96px; }
.xxl-ml-25 { margin-left: 100px; }
.xxl-ml-26 { margin-left: 104px; }
.xxl-ml-27 { margin-left: 108px; }
.xxl-ml-28 { margin-left: 112px; }
.xxl-ml-29 { margin-left: 116px; }
.xxl-ml-30 { margin-left: 120px; }

/* Classes de margin vertical com o nome "py-valor" */
.xxl-my-1 {
  margin-top: 4px;
  margin-bottom: 4px;
}
.xxl-my-2 {
  margin-top: 8px;
  margin-bottom: 8px;
}
.xxl-my-3 {
  margin-top: 12px;
  margin-bottom: 12px;
}
.xxl-my-4 {
  margin-top: 16px;
  margin-bottom: 16px;
}
.xxl-my-5 {
  margin-top: 20px;
  margin-bottom: 20px;
}
.xxl-my-6 {
  margin-top: 24px;
  margin-bottom: 24px;
}
.xxl-my-7 {
  margin-top: 28px;
  margin-bottom: 28px;
}
.xxl-my-8 {
  margin-top: 32px;
  margin-bottom: 32px;
}
.xxl-my-9 {
  margin-top: 36px;
  margin-bottom: 36px;
}
.xxl-my-10 {
  margin-top: 40px;
  margin-bottom: 40px;
}
.xxl-my-11 {
  margin-top: 44px;
  margin-bottom: 44px;
}
.xxl-my-12 {
  margin-top: 48px;
  margin-bottom: 48px;
}
.xxl-my-13 {
  margin-top: 52px;
  margin-bottom: 52px;
}
.xxl-my-14 {
  margin-top: 56px;
  margin-bottom: 56px;
}
.xxl-my-15 {
  margin-top: 60px;
  margin-bottom: 60px;
}
.xxl-my-16 {
  margin-top: 64px;
  margin-bottom: 64px;
}
.xxl-my-17 {
  margin-top: 68px;
  margin-bottom: 68px;
}
.xxl-my-18 {
  margin-top: 72px;
  margin-bottom: 72px;
}
.xxl-my-19 {
  margin-top: 76px;
  margin-bottom: 76px;
}
.xxl-my-20 {
  margin-top: 80px;
  margin-bottom: 80px;
}
.xxl-my-21 {
  margin-top: 84px;
  margin-bottom: 84px;
}
.xxl-my-22 {
  margin-top: 88px;
  margin-bottom: 88px;
}
.xxl-my-23 {
  margin-top: 92px;
  margin-bottom: 92px;
}
.xxl-my-24 {
  margin-top: 96px;
  margin-bottom: 96px;
}
.xxl-my-25 {
  margin-top: 100px;
  margin-bottom: 100px;
}
.xxl-my-26 {
  margin-top: 104px;
  margin-bottom: 104px;
}
.xxl-my-27 {
  margin-top: 108px;
  margin-bottom: 108px;
}
.xxl-my-28 {
  margin-top: 112px;
  margin-bottom: 112px;
}
.xxl-my-29 {
  margin-top: 116px;
  margin-bottom: 116px;
}
.xxl-my-30 {
  margin-top: 120px;
  margin-bottom: 120px;
}

/* Classes de margin com o nome "px-valor" */
.xxl-px-1 {
  margin-left: 4px;
  margin-right: 4px;
}
.xxl-mx-2 {
  margin-left: 8px;
  margin-right: 8px;
}
.xxl-mx-3 {
  margin-left: 12px;
  margin-right: 12px;
}
.xxl-mx-4 {
  margin-left: 16px;
  margin-right: 16px;
}
.xxl-mx-5 {
  margin-left: 20px;
  margin-right: 20px;
}
.xxl-mx-6 {
  margin-left: 24px;
  margin-right: 24px;
}
.xxl-mx-7 {
  margin-left: 28px;
  margin-right: 28px;
}
.xxl-mx-8 {
  margin-left: 32px;
  margin-right: 32px;
}
.xxl-mx-9 {
  margin-left: 36px;
  margin-right: 36px;
}
.xxl-mx-10 {
  margin-left: 40px;
  margin-right: 40px;
}
.xxl-mx-11 {
  margin-left: 44px;
  margin-right: 44px;
}
.xxl-mx-12 {
  margin-left: 48px;
  margin-right: 48px;
}
.xxl-mx-13 {
  margin-left: 52px;
  margin-right: 52px;
}
.xxl-mx-14 {
  margin-left: 56px;
  margin-right: 56px;
}
.xxl-mx-15 {
  margin-left: 60px;
  margin-right: 60px;
}
.xxl-mx-16 {
  margin-left: 64px;
  margin-right: 64px;
}
.xxl-mx-17 {
  margin-left: 68px;
  margin-right: 68px;
}
.xxl-mx-18 {
  margin-left: 72px;
  margin-right: 72px;
}
.xxl-mx-19 {
  margin-left: 76px;
  margin-right: 76px;
}
.xxl-mx-20 {
  margin-left: 80px;
  margin-right: 80px;
}
.xxl-mx-21 {
  margin-left: 84px;
  margin-right: 84px;
}
.xxl-mx-22 {
  margin-left: 88px;
  margin-right: 88px;
}
.xxl-mx-23 {
  margin-left: 92px;
  margin-right: 92px;
}
.xxl-mx-24 {
  margin-left: 96px;
  margin-right: 96px;
}
.xxl-mx-25 {
  margin-left: 100px;
  margin-right: 100px;
}
.xxl-mx-26 {
  margin-left: 104px;
  margin-right: 104px;
}
.xxl-mx-27 {
  margin-left: 108px;
  margin-right: 108px;
}
.xxl-mx-28 {
  margin-left: 112px;
  margin-right: 112px;
}
.xxl-mx-29 {
  margin-left: 116px;
  margin-right: 116px;
}
.xxl-mx-30 {
  margin-left: 120px;
  margin-right: 120px;
}

  /* Margin Porcentagem */
  .xxl-m-1P {
    margin: 4%;
  }

  .xxl-m-2P {
    margin: 8%;
  }

  .xxl-m-3P {
    margin: 12%;
  }

  /* Border radius */
  .xxl-rounded-1 {
    border-radius: 4px;
  }

  .xxl-rounded-2 {
    border-radius: 8px;
  }

  .xxl-rounded-3 {
    border-radius: 12px;
  }

  .xxl-rounded-4 {
    border-radius: 16px;
  }

  .xxl-rounded-5 {
    border-radius: 20px;
  }

  .xxl-rounded-6 {
    border-radius: 24px;
  }

  .xxl-rounded-full {
    border-radius: 50%;
  }
  .xxl-rounded-50 {
    border-radius: 50px;
  }

  /* Shadow */
  .xxl-shadow-sm {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }

  .xxl-shadow-md {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .xxl-shadow-lg {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  }
  .xxl-flex {
    display: flex;
  }

  /* Flex direction */
  .xxl-flex-row {
    flex-direction: row;
  }

  .xxl-flex-col {
    flex-direction: column;
  }

  /* Flex wrap */
  .xxl-flex-wrap {
    flex-wrap: wrap;
  }

  /* Justify content */
  .xxl-justify-start {
    justify-content: flex-start;
  }

  .xxl-justify-end {
    justify-content: flex-end;
  }

  .xxl-justify-center {
    justify-content: center;
  }

  .xxl-justify-between {
    justify-content: space-between;
  }

  .xxl-justify-around {
    justify-content: space-around;
  }

  /* Align items */
  .xxl-items-start {
    align-items: flex-start;
  }

  .xxl-items-end {
    align-items: flex-end;
  }

  .xxl-items-center {
    align-items: center;
  }

  .xxl-items-baseline {
    align-items: baseline;
  }

  .xxl-items-stretch {
    align-items: stretch;
  }

  /* Align content */
  .xxl-content-start {
    align-content: flex-start;
  }

  .xxl-content-end {
    align-content: flex-end;
  }

  .xxl-content-center {
    align-content: center;
  }

  .xxl-content-between {
    align-content: space-between;
  }

  .xxl-content-around {
    align-content: space-around;
  }

  .xxl-content-stretch {
    align-content: stretch;
  }

  /* Flex item */
  .xxl-flex-1 {
    flex: 1;
  }

  .xxl-flex-auto {
    flex: auto;
  }

  .xxl-flex-initial {
    flex: initial;
  }

  .xxl-flex-none {
    flex: none;
  }

  /* Align self */
  .xxl-self-auto {
    align-self: auto;
  }

  .xxl-self-start {
    align-self: flex-start;
  }

  .xxl-self-end {
    align-self: flex-end;
  }

  .xxl-self-center {
    align-self: center;
  }

  .xxl-self-stretch {
    align-self: stretch;
  }
  .xxl-gap-1 {
    gap: 4px;
  }

  .xxl-gap-2 {
    gap: 8px;
  }

  .xxl-gap-3 {
    gap: 16px;
  }

  .xxl-gap-4 {
    gap: 24px;
  }

  .xxl-gap-5 {
    gap: 32px;
  }
  .xxl-gap-6 {
    gap: 40px;
  }
  .xxl-gap-7 {
    gap: 48px;
  }
  .xxl-gap-8 {
    gap: 56px;
  }
  .xxl-gap-9 {
    gap: 64px;
  }
  .xxl-gap-10 {
    gap: 72px;
  }
  .xxl-gap-11 {
    gap: 80px;
  }
  .xxl-gap-12 {
    gap: 88px;
  }
  .xxl-gap-13 {
    gap: 96px;
  }
  .xxlgap-14 {
    gap: 104px;
  }
  .xxl-gap-15 {
    gap: 112px;
  }
  .xxl-w-1 {
    width: 10%;
  }
  .xxl-w-2 {
    width: 20%;
  }
  .xxl-w-3 {
    width: 30%;
  }
  .xxl-w-4 {
    width: 40%;
  }
  .xxl-w-5 {
    width: 50%;
  }
  .xxl-w-6 {
    width: 60%;
  }
  .xxl-w-7 {
    width: 70%;
  }
  .xxl-w-8 {
    width: 80%;
  }
  .xxl-w-9 {
    width: 90%;
  }
  .xxl-w-full {
    width: 100%;
  }
  .xxl-w-auto {
    width: auto;
  }
  .xxl-w-fit-content {
    width: fit-content;
  }
  .xxl-h-1 {
    height: 12px;
  }
  .xxl-h-2 {
    height: 24px;
  }
  .xxl-h-3 {
    height: 36px;
  }
  .xxl-h-4 {
    height: 48px;
  }
  .xxl-h-5 {
    height: 60px;
  }
  .xxl-h-6 {
    height: 72px;
  }
  .xxl-h-7 {
    height: 84px;
  }
  .xxl-h-8 {
    height: 96px;
  }
  .xxl-h-9 {
    height: 108px;
  }
  .xxl-h-full {
    height: 100%;
  }
  .xxl-h-screen {
    height: 100vh;
  }
  .xxl-h-fit-content {
    height: fit-content;
  }

  /* Classes para posição */
  .xxl-relative {
    position: relative;
  }
  .xxl-absolute {
    position: absolute;
  }
  .xxl-fixed {
    position: fixed;
  }
  .xxl-static {
    position: static;
  }
  .xxl-sticky {
    position: sticky;
  }
  /* Classes para posição */
  .xxl-top-0 {
    top: 0;
  }
  .xxl-right-0 {
    right: 0;
  }
  .xxl-bottom-0 {
    bottom: 0;
  }
  .xxl-left-0 {
    left: 0;
  }

  /* Classes para overflow */
  .xxl-overflow-auto {
    overflow: auto;
  }
  .xxl-overflow-hidden {
    overflow: hidden;
  }
  .xxl-overflow-visible {
    overflow: visible;
  }
  .xxl-overflow-scroll {
    overflow: scroll;
  }
  .xxl-overflow-x-auto {
    overflow-x: auto;
  }
  .xxl-overflow-x-hidden {
    overflow-x: hidden;
  }
  .xxl-overflow-x-visible {
    overflow-x: visible;
  }
  .xxl-overflow-x-scroll {
    overflow-x: scroll;
  }
  .xxl-overflow-y-auto {
    overflow-y: auto;
  }
  .xxl-overflow-y-hidden {
    overflow-y: hidden;
  }
  .xxl-overflow-y-visible {
    overflow-y: visible;
  }
  .xxl-overflow-y-scroll {
    overflow-y: scroll;
  }
  .xxl-text-xs {
    font-size: 0.75rem;
  }
  .xxl-text-sm {
    font-size: 0.875rem;
  }
  .xxl-text-base {
    font-size: 1rem;
  }
  .xxl-text-lg {
    font-size: 1.125rem;
  }
  .xxl-text-xl {
    font-size: 1.25rem;
  }
  .xxl-text-2xl {
    font-size: 1.5rem;
  }
  .xxl-text-3xl {
    font-size: 1.875rem;
  }
  .xxl-text-4xl {
    font-size: 2.5rem;
  }
  .xxl-text-5xl {
    font-size: 3rem;
  }
  .xxl-text-6xl {
    font-size: 4rem;
  }
  .xxl-text-7xl {
    font-size: 5rem;
  }
  .xxl-text-8xl {
    font-size: 6rem;
  }
  .xxl-text-9xl {
    font-size: 6.5rem;
  }
  .xxl-font-thin {
    font-weight: 100;
  }
  .xxl-font-extralight {
    font-weight: 200;
  }
  .xxl-font-light {
    font-weight: 300;
  }
  .xxl-font-normal {
    font-weight: 400;
  }
  .xxl-font-medium {
    font-weight: 500;
  }
  .xxl-font-semibold {
    font-weight: 600;
  }
  .xxl-font-bold {
    font-weight: 700;
  }
  .xxl-font-extrabold {
    font-weight: 800;
  }
  .xxl-font-black {
    font-weight: 900;
  }
  .xxl-opacity-0 {
    opacity: 0;
  }

  .xxl-opacity-25 {
    opacity: 0.25;
  }

  .xxl-opacity-50 {
    opacity: 0.5;
  }

  .xxl-opacity-75 {
    opacity: 0.75;
  }

  .xxl-opacity-100 {
    opacity: 1;
  }

  .xxl-leading-none {
    line-height: 1;
  }

  .xxl-leading-tight {
    line-height: 1.25;
  }

  .xxl-leading-normal {
    line-height: 1.5;
  }

  .xxl-leading-relaxed {
    line-height: 1.625;
  }

  .xxl-leading-loose {
    line-height: 2;
  }

  .xxl-block {
    display: block;
  }

  .xxl-inline-block {
    display: inline-block;
  }

  .xxl-inline {
    display: inline;
  }

  .xxl-inline-flex {
    display: inline-flex;
  }

  .xxl-inline-grid {
    display: inline-grid;
  }

  .xxl-table {
    display: table;
  }

  .xxl-table-caption {
    display: table-caption;
  }

  .xxl-table-cell {
    display: table-cell;
  }

  .xxl-table-column {
    display: table-column;
  }

  .xxl-table-column-group {
    display: table-column-group;
  }

  .xxl-table-footer-group {
    display: table-footer-group;
  }

  .xxl-table-header-group {
    display: table-header-group;
  }

  .xxl-table-row {
    display: table-row;
  }

  .xxl-table-row-group {
    display: table-row-group;
  }

  .xxl-hidden {
    display: none !important;
  }
  /* Text Align - Extra Large Screen */
  .xxl-text-left {
    text-align: left !important;
  }

  .xxl-text-center {
    text-align: center !important;
  }

  .xxl-text-right {
    text-align: right !important;
  }

  .xxl-text-justify {
    text-align: justify !important;
  }
  .xxl-aspect-ratio-custom{
    aspect-ratio: var(--aspect-ratio-custom);
  }
}


/* xl */
@media screen and (max-width: 1280px) {
  .xl-grid {
    display: grid;
  }
  .xl-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  
  .xl-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .xl-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  
  .xl-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  
  .xl-grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  
  .xl-grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  
  .xl-grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  
  .xl-grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  
  .xl-grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  
  .xl-grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  
  .xl-grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  
  .xl-grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  
  .xl-grid-cols-none {
    grid-template-columns: none;
  }
  
  /* Grid items */
  .xl-item {
    grid-column: auto;
    grid-row: auto;
  }
  
  .xl-grid-item-1 {
    grid-column: span 1 / span 1;
    width: 100%;
  }
  .xl-grid-item-2 {
    grid-column: span 2 / span 2;
    width: 100%;
  }
  .xl-grid-item-3 {
    grid-column: span 3 / span 3;
    width: 100%;
  }
  .xl-grid-item-4 {
    grid-column: span 4 / span 4;
    width: 100%;
  }
  .xl-grid-item-5 {
    grid-column: span 5 / span 5;
    width: 100%;
  }
  .xl-grid-item-6 {
    grid-column: span 6 / span 6;
    width: 100%;
  }
  .xl-grid-item-7 {
    grid-column: span 7 / span 7;
    width: 100%;
  }
  .xl-grid-item-8 {
    grid-column: span 8 / span 8;
    width: 100%;
  }
  .xl-grid-item-9 {
    grid-column: span 9 / span 9;
    width: 100%;
  }
  .xl-grid-item-10 {
    grid-column: span 10 / span 10;
    width: 100%;
  }
  .xl-grid-item-11 {
    grid-column: span 11 / span 11;
    width: 100%;
  }
  .xl-grid-item-12 {
    grid-column: span 12 / span 12;
    width: 100%;
  }
  /* Ordem */
.xl-order-1 {
  order: 1;
}
.xl-order-2 {
  order: 2;
}
.xl-order-3 {
  order: 3;
}
.xl-order-4 {
  order: 4;
}
.xl-order-5 {
  order: 5;
}
.xl-order-6 {
  order: 6;
}
.xl-order-7 {
  order: 7;
}
.xl-order-8 {
  order: 8;
}
.xl-order-9 {
  order: 9;
}
.xl-order-10 {
  order: 10;
}
.xl-order-first {
  order: -9999;
}
.xl-order-last {
  order: 9999;
}
.xl-order-none {
  order: 0;
}
  .xl-p-0{
    padding: 0;
  }
  .xl-p-1 {
    padding: 4px;
  }

  .xl-p-2 {
    padding: 8px;
  }

  .xl-p-3 {
    padding: 12px;
  }

  .xl-p-4 {
    padding: 16px;
  }

  .xl-p-5 {
    padding: 20px;
  }

  .xl-p-6 {
    padding: 24px;
  }

  .xl-p-7 {
    padding: 28px;
  }

  .xl-p-8 {
    padding: 32px;
  }

  .xl-p-9 {
    padding: 36px;
  }

  .xl-p-10 {
    padding: 40px;
  }

  .xl-p-11 {
    padding: 44px;
  }

  .xl-p-12 {
    padding: 48px;
  }

  .xl-p-13 {
    padding: 52px;
  }

  .xl-p-14 {
    padding: 56px;
  }

  .xl-p-15 {
    padding: 60px;
  }

  .xl-p-16 {
    padding: 64px;
  }

  .xl-p-17 {
    padding: 68px;
  }

  .xl-p-18 {
    padding: 72px;
  }

  .xl-p-19 {
    padding: 76px;
  }

  .xl-p-20 {
    padding: 80px;
  }

  .xl-p-21 {
    padding: 84px;
  }

  .xl-p-22 {
    padding: 88px;
  }

  .xl-p-23 {
    padding: 92px;
  }

  .xl-p-24 {
    padding: 96px;
  }

  .xl-p-25 {
    padding: 100px;
  }

  .xl-p-26 {
    padding: 104px;
  }

  .xl-p-27 {
    padding: 108px;
  }

  .xl-p-28 {
    padding: 112px;
  }

  .xl-p-29 {
    padding: 116px;
  }

  .xl-p-30 {
    padding: 120px;
  }

  /* Classes de padding com o nome "p-posicao-valor" */

  .xl-pt-1 {
    padding-top: 4px;
  }

  .xl-pt-2 {
    padding-top: 8px;
  }

  .xl-pt-3 {
    padding-top: 12px;
  }

  .xl-pt-4 {
    padding-top: 16px;
  }

  .xl-pt-5 {
    padding-top: 20px;
  }

  .xl-pt-6 {
    padding-top: 24px;
  }

  .xl-pt-7 {
    padding-top: 28px;
  }

  .xl-pt-8 {
    padding-top: 32px;
  }

  .xl-pt-9 {
    padding-top: 36px;
  }

  .xl-pt-10 {
    padding-top: 40px;
  }

  .xl-pt-11 {
    padding-top: 44px;
  }

  .xl-pt-12 {
    padding-top: 48px;
  }

  .xl-pt-13 {
    padding-top: 52px;
  }

  .xl-pt-14 {
    padding-top: 56px;
  }

  .xl-pt-15 {
    padding-top: 60px;
  }

  .xl-pt-16 {
    padding-top: 64px;
  }

  .xl-pt-17 {
    padding-top: 68px;
  }

  .xl-pt-18 {
    padding-top: 72px;
  }

  .xl-pt-19 {
    padding-top: 76px;
  }

  .xl-pt-20 {
    padding-top: 80px;
  }

  .xl-pt-21 {
    padding-top: 84px;
  }

  .xl-pt-22 {
    padding-top: 88px;
  }

  .xl-pt-23 {
    padding-top: 92px;
  }

  .xl-pt-24 {
    padding-top: 96px;
  }

  .xl-pt-25 {
    padding-top: 100px;
  }

  .xl-pt-26 {
    padding-top: 104;
  }

  .xl-pt-27 {
    padding-top: 108px;
  }

  .xl-pt-28 {
    padding-top: 112px;
  }

  .xl-pt-29 {
    padding-top: 116px;
  }

  .xl-pt-30 {
    padding-top: 120px;
  }

  .xl-pr-1 {
    padding-right: 4px;
  }

  .xl-pr-2 {
    padding-right: 8px;
  }

  .xl-pr-3 {
    padding-right: 12px;
  }

  .xl-pr-4 {
    padding-right: 16px;
  }

  .xl-pr-5 {
    padding-right: 20px;
  }

  .xl-pr-6 {
    padding-right: 24px;
  }

  .xl-pr-7 {
    padding-right: 28px;
  }

  .xl-pr-8 {
    padding-right: 32px;
  }

  .xl-pr-9 {
    padding-right: 36px;
  }

  .xl-pr-10 {
    padding-right: 40px;
  }

  .xl-pr-11 {
    padding-right: 44px;
  }

  .xl-pr-12 {
    padding-right: 48px;
  }

  .xl-pr-13 {
    padding-right: 52px;
  }

  .xl-pr-14 {
    padding-right: 56px;
  }

  .xl-pr-15 {
    padding-right: 60px;
  }

  .xl-pr-16 {
    padding-right: 64px;
  }

  .xl-pr-17 {
    padding-right: 68px;
  }

  .xl-pr-18 {
    padding-right: 72px;
  }

  .xl-pr-19 {
    padding-right: 76px;
  }

  .xl-pr-20 {
    padding-right: 80px;
  }

  .xl-pr-21 {
    padding-right: 84px;
  }

  .xl-pr-22 {
    padding-right: 88px;
  }

  .xl-pr-23 {
    padding-right: 92px;
  }

  .xl-pr-24 {
    padding-right: 96px;
  }

  .xl-pr-25 {
    padding-right: 100px;
  }

  .xl-pr-26 {
    padding-right: 104px;
  }

  .xl-pr-27 {
    padding-right: 108px;
  }

  .xl-pr-28 {
    padding-right: 112px;
  }

  .xl-pr-29 {
    padding-right: 116px;
  }

  .xl-pr-30 {
    padding-right: 120px;
  }

  .xl-pb-1 {
    padding-bottom: 4px;
  }

  .xl-pb-2 {
    padding-bottom: 8px;
  }

  .xl-pb-3 {
    padding-bottom: 12px;
  }

  .xl-pb-4 {
    padding-bottom: 16px;
  }

  .xl-pb-5 {
    padding-bottom: 20px;
  }

  .xl-pb-6 {
    padding-bottom: 24px;
  }

  .xl-pb-7 {
    padding-bottom: 28px;
  }

  .xl-pb-8 {
    padding-bottom: 32px;
  }

  .xl-pb-9 {
    padding-bottom: 36px;
  }

  .xl-pb-10 {
    padding-bottom: 40px;
  }

  .xl-pb-11 {
    padding-bottom: 44px;
  }

  .xl-pb-12 {
    padding-bottom: 48px;
  }

  .xl-pb-13 {
    padding-bottom: 52px;
  }

  .xl-pb-14 {
    padding-bottom: 56px;
  }

  .xl-pb-15 {
    padding-bottom: 60px;
  }

  .xl-pb-16 {
    padding-bottom: 64px;
  }

  .xl-pb-17 {
    padding-bottom: 68px;
  }

  .xl-pb-18 {
    padding-bottom: 72px;
  }

  .xl-pb-19 {
    padding-bottom: 76px;
  }

  .xl-pb-20 {
    padding-bottom: 80px;
  }

  .xl-pb-21 {
    padding-bottom: 84px;
  }

  .xl-pb-22 {
    padding-bottom: 88px;
  }

  .xl-pb-23 {
    padding-bottom: 92px;
  }

  .xl-pb-24 {
    padding-bottom: 96px;
  }

  .xl-pb-25 {
    padding-bottom: 100px;
  }

  .xl-pb-26 {
    padding-bottom: 104px;
  }

  .xl-pb-27 {
    padding-bottom: 108px;
  }

  .xl-pb-28 {
    padding-bottom: 112px;
  }

  .xl-pb-29 {
    padding-bottom: 116px;
  }

  .xl-pb-30 {
    padding-bottom: 120px;
  }

  .xl-pl-1 {
    padding-left: 4px;
  }

  .xl-pl-2 {
    padding-left: 8px;
  }

  .xl-pl-3 {
    padding-left: 12px;
  }

  .xl-pl-4 {
    padding-left: 16px;
  }

  .xl-pl-5 {
    padding-left: 20px;
  }

  .xl-pl-6 {
    padding-left: 24px;
  }

  .xl-pl-7 {
    padding-left: 28px;
  }

  .xl-pl-8 {
    padding-left: 32px;
  }

  .xl-pl-9 {
    padding-left: 36px;
  }

  .xl-pl-10 {
    padding-left: 40px;
  }

  .xl-pl-11 {
    padding-left: 44px;
  }

  .xl-pl-12 {
    padding-left: 48px;
  }

  .xl-pl-13 {
    padding-left: 52px;
  }

  .xl-pl-14 {
    padding-left: 56px;
  }

  .xl-pl-15 {
    padding-left: 60px;
  }

  .xl-pl-16 {
    padding-left: 64px;
  }

  .xl-pl-17 {
    padding-left: 68px;
  }

  .xl-pl-18 {
    padding-left: 72px;
  }

  .xl-pl-19 {
    padding-left: 76px;
  }

  .xl-pl-20 {
    padding-left: 80px;
  }

  .xl-pl-21 {
    padding-left: 84px;
  }

  .xl-pl-22 {
    padding-left: 88px;
  }

  .xl-pl-23 {
    padding-left: 92px;
  }

  .xl-pl-24 {
    padding-left: 96px;
  }

  .xl-pl-25 {
    padding-left: 100px;
  }

  .xl-pl-26 {
    padding-left: 104px;
  }

  .xl-pl-27 {
    padding-left: 108px;
  }

  .xl-pl-28 {
    padding-left: 112px;
  }

  .xl-pl-29 {
    padding-left: 116px;
  }

  .xl-pl-30 {
    padding-left: 120px;
  }

  /* Classes de padding vertical com o nome "py-valor" */
  .xl-py-1 {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .xl-py-2 {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .xl-py-3 {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .xl-py-4 {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .xl-py-5 {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .xl-py-6 {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .xl-py-7 {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .xl-py-8 {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .xl-py-9 {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .xl-py-10 {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .xl-py-11 {
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .xl-py-12 {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .xl-py-13 {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  .xl-py-14 {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .xl-py-15 {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .xl-py-16 {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .xl-py-17 {
    padding-top: 68px;
    padding-bottom: 68px;
  }

  .xl-py-18 {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .xl-py-19 {
    padding-top: 76px;
    padding-bottom: 76px;
  }

  .xl-py-20 {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .xl-py-21 {
    padding-top: 84px;
    padding-bottom: 84px;
  }

  .xl-py-22 {
    padding-top: 88px;
    padding-bottom: 88px;
  }

  .xl-py-23 {
    padding-top: 92px;
    padding-bottom: 92px;
  }

  .xl-py-24 {
    padding-top: 96px;
    padding-bottom: 96px;
  }

  .xl-py-25 {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .xl-py-26 {
    padding-top: 104px;
    padding-bottom: 104px;
  }

  .xl-py-27 {
    padding-top: 108px;
    padding-bottom: 108px;
  }

  .xl-py-28 {
    padding-top: 112px;
    padding-bottom: 112px;
  }

  .xl-py-29 {
    padding-top: 116px;
    padding-bottom: 116px;
  }

  .xl-py-30 {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  /* Classes de padding com o nome "px-valor" */
  .xl-px-1 {
    padding-left: 4px;
    padding-right: 4px;
  }

  .xl-px-2 {
    padding-left: 8px;
    padding-right: 8px;
  }

  .xl-px-3 {
    padding-left: 12px;
    padding-right: 12px;
  }

  .xl-px-4 {
    padding-left: 16px;
    padding-right: 16px;
  }

  .xl-px-5 {
    padding-left: 20px;
    padding-right: 20px;
  }

  .xl-px-6 {
    padding-left: 24px;
    padding-right: 24px;
  }

  .xl-px-7 {
    padding-left: 28px;
    padding-right: 28px;
  }

  .xl-px-8 {
    padding-left: 32px;
    padding-right: 32px;
  }

  .xl-px-9 {
    padding-left: 36px;
    padding-right: 36px;
  }

  .xl-px-10 {
    padding-left: 40px;
    padding-right: 40px;
  }

  .xl-px-11 {
    padding-left: 44px;
    padding-right: 44px;
  }

  .xl-px-12 {
    padding-left: 48px;
    padding-right: 48px;
  }

  .xl-px-13 {
    padding-left: 52px;
    padding-right: 52px;
  }

  .xl-px-14 {
    padding-left: 56px;
    padding-right: 56px;
  }

  .xl-px-15 {
    padding-left: 60px;
    padding-right: 60px;
  }

  .xl-px-16 {
    padding-left: 64px;
    padding-right: 64px;
  }

  .xl-px-17 {
    padding-left: 68px;
    padding-right: 68px;
  }

  .xl-px-18 {
    padding-left: 72px;
    padding-right: 72px;
  }

  .xl-px-19 {
    padding-left: 76px;
    padding-right: 76px;
  }

  .xl-px-20 {
    padding-left: 80px;
    padding-right: 80px;
  }

  .xl-px-21 {
    padding-left: 84px;
    padding-right: 84px;
  }

  .xl-px-22 {
    padding-left: 88px;
    padding-right: 88px;
  }

  .xl-px-23 {
    padding-left: 92px;
    padding-right: 92px;
  }

  .xl-px-24 {
    padding-left: 96px;
    padding-right: 96px;
  }

  .xl-px-25 {
    padding-left: 100px;
    padding-right: 100px;
  }

  .xl-px-26 {
    padding-left: 104px;
    padding-right: 104px;
  }

  .xl-px-27 {
    padding-left: 108px;
    padding-right: 108px;
  }

  .xl-px-28 {
    padding-left: 112px;
    padding-right: 112px;
  }

  .xl-px-29 {
    padding-left: 116px;
    padding-right: 116px;
  }

  .xl-px-30 {
    padding-left: 120px;
    padding-right: 120px;
  }

  /* PADDING PORCENTAGEM */

  .xl-p-1P {
    padding: 4%;
  }

  .xl-p-2P {
    padding: 8%;
  }

  .xl-p-3P {
    padding: 12%;
  }

  /* Classes de margin com o nome "p-valor" */
  .xl-m-1 {
    margin: 4px;
  }

  .xl-m-2 {
    margin: 8px;
  }

  .xl-m-3 {
    margin: 12px;
  }

  .xl-m-4 {
    margin: 16px;
  }

  .xl-m-5 {
    margin: 20px;
  }

  .xl-m-6 {
    margin: 24px;
  }

  .xl-m-7 {
    margin: 28px;
  }

  .xl-m-8 {
    margin: 32px;
  }

  .xl-m-9 {
    margin: 36px;
  }

  .xl-m-10 {
    margin: 40px;
  }

  .xl-m-11 {
    margin: 44px;
  }

  .xl-m-12 {
    margin: 48px;
  }

  .xl-m-13 {
    margin: 52px;
  }

  .xl-m-14 {
    margin: 56px;
  }

  .xl-m-15 {
    margin: 60px;
  }

  .xl-m-16 {
    margin: 64px;
  }

  .xl-m-17 {
    margin: 68px;
  }

  .xl-m-18 {
    margin: 72px;
  }

  .xl-m-19 {
    margin: 76px;
  }

  .xl-m-20 {
    margin: 80px;
  }

  .xl-m-21 {
    margin: 84px;
  }

  .xl-m-22 {
    margin: 88px;
  }

  .xl-m-23 {
    margin: 92px;
  }

  .xl-m-24 {
    margin: 96px;
  }

  .xl-m-25 {
    margin: 100px;
  }

  .xl-m-26 {
    margin: 104px;
  }

  .xl-m-27 {
    margin: 108px;
  }

  .xl-m-28 {
    margin: 112px;
  }

  .xl-m-29 {
    margin: 116px;
  }

  .xl-m-30 {
    margin: 120px;
  }

  /* Classes de margin com o nome "p-posicao-valor" */

  .xl-mt-1 {
    margin-top: 4px;
  }

  .xl-mt-2 {
    margin-top: 8px;
  }

  .xl-mt-3 {
    margin-top: 12px;
  }

  .xl-mt-4 {
    margin-top: 16px;
  }

  .xl-mt-5 {
    margin-top: 20px;
  }

  .xl-mt-6 {
    margin-top: 24px;
  }

  .xl-mt-7 {
    margin-top: 28px;
  }

  .xl-mt-8 {
    margin-top: 32px;
  }

  .xl-mt-9 {
    margin-top: 36px;
  }

  .xl-mt-10 {
    margin-top: 40px;
  }

  .xl-mt-11 {
    margin-top: 44px;
  }

  .xl-mt-12 {
    margin-top: 48px;
  }

  .xl-mt-13 {
    margin-top: 52px;
  }

  .xl-mt-14 {
    margin-top: 56px;
  }

  .xl-mt-15 {
    margin-top: 60px;
  }

  .xl-mt-16 {
    margin-top: 64px;
  }

  .xl-mt-17 {
    margin-top: 68px;
  }

  .xl-mt-18 {
    margin-top: 72px;
  }

  .xl-mt-19 {
    margin-top: 76px;
  }

  .xl-mt-20 {
    margin-top: 80px;
  }

  .xl-mt-21 {
    margin-top: 84px;
  }

  .xl-mt-22 {
    margin-top: 88px;
  }

  .xl-mt-23 {
    margin-top: 92px;
  }

  .xl-mt-24 {
    margin-top: 96px;
  }

  .xl-mt-25 {
    margin-top: 100px;
  }

  .xl-mt-26 {
    margin-top: 104;
  }

  .xl-mt-27 {
    margin-top: 108px;
  }

  .xl-mt-28 {
    margin-top: 112px;
  }

  .xl-mt-29 {
    margin-top: 116px;
  }

  .xl-mt-30 {
    margin-top: 120px;
  }

  .xl-mr-1 {
    margin-right: 4px;
  }

  .xl-mr-2 {
    margin-right: 8px;
  }

  .xl-mr-3 {
    margin-right: 12px;
  }

  .xl-mr-4 {
    margin-right: 16px;
  }

  .xl-mr-5 {
    margin-right: 20px;
  }

  .xl-mr-6 {
    margin-right: 24px;
  }

  .xl-mr-7 {
    margin-right: 28px;
  }

  .xl-mr-8 {
    margin-right: 32px;
  }

  .xl-mr-9 {
    margin-right: 36px;
  }

  .xl-mr-10 {
    margin-right: 40px;
  }

  .xl-mr-11 {
    margin-right: 44px;
  }

  .xl-mr-12 {
    margin-right: 48px;
  }

  .xl-mr-13 {
    margin-right: 52px;
  }

  .xl-mr-14 {
    margin-right: 56px;
  }

  .xl-mr-15 {
    margin-right: 60px;
  }

  .xl-mr-16 {
    margin-right: 64px;
  }

  .xl-mr-17 {
    margin-right: 68px;
  }

  .xl-mr-18 {
    margin-right: 72px;
  }

  .xl-mr-19 {
    margin-right: 76px;
  }

  .xl-mr-20 {
    margin-right: 80px;
  }

  .xl-mr-21 {
    margin-right: 84px;
  }

  .xl-mr-22 {
    margin-right: 88px;
  }

  .xl-mr-23 {
    margin-right: 92px;
  }

  .xl-mr-24 {
    margin-right: 96px;
  }

  .xl-mr-25 {
    margin-right: 100px;
  }

  .xl-mr-26 {
    margin-right: 104px;
  }

  .xl-mr-27 {
    margin-right: 108px;
  }

  .xl-mr-28 {
    margin-right: 112px;
  }

  .xl-mr-29 {
    margin-right: 116px;
  }

  .xl-mr-30 {
    margin-right: 120px;
  }

  .xl-mb-1 {
    margin-bottom: 4px;
  }

  .xl-mb-2 {
    margin-bottom: 8px;
  }

  .xl-mb-3 {
    margin-bottom: 12px;
  }

  .xl-mb-4 {
    margin-bottom: 16px;
  }

  .xl-mb-5 {
    margin-bottom: 20px;
  }

  .xl-mb-6 {
    margin-bottom: 24px;
  }

  .xl-mb-7 {
    margin-bottom: 28px;
  }

  .xl-mb-8 {
    margin-bottom: 32px;
  }

  .xl-mb-9 {
    margin-bottom: 36px;
  }

  .xl-mb-10 {
    margin-bottom: 40px;
  }

  .xl-mb-11 {
    margin-bottom: 44px;
  }

  .xl-mb-12 {
    margin-bottom: 48px;
  }

  .xl-mb-13 {
    margin-bottom: 52px;
  }

  .xl-mb-14 {
    margin-bottom: 56px;
  }

  .xl-mb-15 {
    margin-bottom: 60px;
  }

  .xl-mb-16 {
    margin-bottom: 64px;
  }

  .xl-mb-17 {
    margin-bottom: 68px;
  }

  .xl-mb-18 {
    margin-bottom: 72px;
  }

  .xl-mb-19 {
    margin-bottom: 76px;
  }

  .xl-mb-20 {
    margin-bottom: 80px;
  }

  .xl-mb-21 {
    margin-bottom: 84px;
  }

  .xl-mb-22 {
    margin-bottom: 88px;
  }

  .xl-mb-23 {
    margin-bottom: 92px;
  }

  .xl-mb-24 {
    margin-bottom: 96px;
  }

  .xl-mb-25 {
    margin-bottom: 100px;
  }

  .xl-mb-26 {
    margin-bottom: 104px;
  }

  .xl-mb-27 {
    margin-bottom: 108px;
  }

  .xl-mb-28 {
    margin-bottom: 112px;
  }

  .xl-mb-29 {
    margin-bottom: 116px;
  }

  .xl-mb-30 {
    margin-bottom: 120px;
  }

  .xl-ml-1 {
    margin-left: 4px;
  }

  .xl-ml-2 {
    margin-left: 8px;
  }

  .xl-ml-3 {
    margin-left: 12px;
  }

  .xl-ml-4 {
    margin-left: 16px;
  }

  .xl-ml-5 {
    margin-left: 20px;
  }

  .xl-ml-6 {
    margin-left: 24px;
  }

  .xl-ml-7 {
    margin-left: 28px;
  }

  .xl-ml-8 {
    margin-left: 32px;
  }

  .xl-ml-9 {
    margin-left: 36px;
  }

  .xl-ml-10 {
    margin-left: 40px;
  }

  .xl-ml-11 {
    margin-left: 44px;
  }

  .xl-ml-12 {
    margin-left: 48px;
  }

  .xl-ml-13 {
    margin-left: 52px;
  }

  .xl-ml-14 {
    margin-left: 56px;
  }

  .xl-ml-15 {
    margin-left: 60px;
  }

  .xl-ml-16 {
    margin-left: 64px;
  }

  .xl-ml-17 {
    margin-left: 68px;
  }

  .xl-ml-18 {
    margin-left: 72px;
  }

  .xl-ml-19 {
    margin-left: 76px;
  }

  .xl-ml-20 {
    margin-left: 80px;
  }

  .xl-ml-21 {
    margin-left: 84px;
  }

  .xl-ml-22 {
    margin-left: 88px;
  }

  .xl-ml-23 {
    margin-left: 92px;
  }

  .xl-ml-24 {
    margin-left: 96px;
  }

  .xl-ml-25 {
    margin-left: 100px;
  }

  .xl-ml-26 {
    margin-left: 104px;
  }

  .xl-ml-27 {
    margin-left: 108px;
  }

  .xl-ml-28 {
    margin-left: 112px;
  }

  .xl-ml-29 {
    margin-left: 116px;
  }

  .xl-ml-30 {
    margin-left: 120px;
  }

  /* Classes de margin vertical com o nome "py-valor" */
  .xl-my-1 {
    margin-top: 4px;
    margin-bottom: 4px;
  }

  .xl-my-2 {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .xl-my-3 {
    margin-top: 12px;
    margin-bottom: 12px;
  }

  .xl-my-4 {
    margin-top: 16px;
    margin-bottom: 16px;
  }

  .xl-my-5 {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .xl-my-6 {
    margin-top: 24px;
    margin-bottom: 24px;
  }

  .xl-my-7 {
    margin-top: 28px;
    margin-bottom: 28px;
  }

  .xl-my-8 {
    margin-top: 32px;
    margin-bottom: 32px;
  }

  .xl-my-9 {
    margin-top: 36px;
    margin-bottom: 36px;
  }

  .xl-my-10 {
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .xl-my-11 {
    margin-top: 44px;
    margin-bottom: 44px;
  }

  .xl-my-12 {
    margin-top: 48px;
    margin-bottom: 48px;
  }

  .xl-my-13 {
    margin-top: 52px;
    margin-bottom: 52px;
  }

  .xl-my-14 {
    margin-top: 56px;
    margin-bottom: 56px;
  }

  .xl-my-15 {
    margin-top: 60px;
    margin-bottom: 60px;
  }

  .xl-my-16 {
    margin-top: 64px;
    margin-bottom: 64px;
  }

  .xl-my-17 {
    margin-top: 68px;
    margin-bottom: 68px;
  }

  .xl-my-18 {
    margin-top: 72px;
    margin-bottom: 72px;
  }

  .xl-my-19 {
    margin-top: 76px;
    margin-bottom: 76px;
  }

  .xl-my-20 {
    margin-top: 80px;
    margin-bottom: 80px;
  }

  .xl-my-21 {
    margin-top: 84px;
    margin-bottom: 84px;
  }

  .xl-my-22 {
    margin-top: 88px;
    margin-bottom: 88px;
  }

  .xl-my-23 {
    margin-top: 92px;
    margin-bottom: 92px;
  }

  .xl-my-24 {
    margin-top: 96px;
    margin-bottom: 96px;
  }

  .xl-my-25 {
    margin-top: 100px;
    margin-bottom: 100px;
  }

  .xl-my-26 {
    margin-top: 104px;
    margin-bottom: 104px;
  }

  .xl-my-27 {
    margin-top: 108px;
    margin-bottom: 108px;
  }

  .xl-my-28 {
    margin-top: 112px;
    margin-bottom: 112px;
  }

  .xl-my-29 {
    margin-top: 116px;
    margin-bottom: 116px;
  }

  .xl-my-30 {
    margin-top: 120px;
    margin-bottom: 120px;
  }

  /* Classes de margin com o nome "px-valor" */
  .xl-px-1 {
    margin-left: 4px;
    margin-right: 4px;
  }

  .xl-mx-2 {
    margin-left: 8px;
    margin-right: 8px;
  }

  .xl-mx-3 {
    margin-left: 12px;
    margin-right: 12px;
  }

  .xl-mx-4 {
    margin-left: 16px;
    margin-right: 16px;
  }

  .xl-mx-5 {
    margin-left: 20px;
    margin-right: 20px;
  }

  .xl-mx-6 {
    margin-left: 24px;
    margin-right: 24px;
  }

  .xl-mx-7 {
    margin-left: 28px;
    margin-right: 28px;
  }

  .xl-mx-8 {
    margin-left: 32px;
    margin-right: 32px;
  }

  .xl-mx-9 {
    margin-left: 36px;
    margin-right: 36px;
  }

  .xl-mx-10 {
    margin-left: 40px;
    margin-right: 40px;
  }

  .xl-mx-11 {
    margin-left: 44px;
    margin-right: 44px;
  }

  .xl-mx-12 {
    margin-left: 48px;
    margin-right: 48px;
  }

  .xl-mx-13 {
    margin-left: 52px;
    margin-right: 52px;
  }

  .xl-mx-14 {
    margin-left: 56px;
    margin-right: 56px;
  }

  .xl-mx-15 {
    margin-left: 60px;
    margin-right: 60px;
  }

  .xl-mx-16 {
    margin-left: 64px;
    margin-right: 64px;
  }

  .xl-mx-17 {
    margin-left: 68px;
    margin-right: 68px;
  }

  .xl-mx-18 {
    margin-left: 72px;
    margin-right: 72px;
  }

  .xl-mx-19 {
    margin-left: 76px;
    margin-right: 76px;
  }

  .xl-mx-20 {
    margin-left: 80px;
    margin-right: 80px;
  }

  .xl-mx-21 {
    margin-left: 84px;
    margin-right: 84px;
  }

  .xl-mx-22 {
    margin-left: 88px;
    margin-right: 88px;
  }

  .xl-mx-23 {
    margin-left: 92px;
    margin-right: 92px;
  }

  .xl-mx-24 {
    margin-left: 96px;
    margin-right: 96px;
  }

  .xl-mx-25 {
    margin-left: 100px;
    margin-right: 100px;
  }

  .xl-mx-26 {
    margin-left: 104px;
    margin-right: 104px;
  }

  .xl-mx-27 {
    margin-left: 108px;
    margin-right: 108px;
  }

  .xl-mx-28 {
    margin-left: 112px;
    margin-right: 112px;
  }

  .xl-mx-29 {
    margin-left: 116px;
    margin-right: 116px;
  }

  .xl-mx-30 {
    margin-left: 120px;
    margin-right: 120px;
  }

  /* Margin Porcentagem */
  .xl-m-1P {
    margin: 4%;
  }

  .xl-m-2P {
    margin: 8%;
  }

  .xl-m-3P {
    margin: 12%;
  }
  /* Border radius */
  .xl-rounded-1 {
    border-radius: 4px;
  }

  .xl-rounded-2 {
    border-radius: 8px;
  }

  .xl-rounded-3 {
    border-radius: 12px;
  }

  .xl-rounded-4 {
    border-radius: 16px;
  }

  .xl-rounded-5 {
    border-radius: 20px;
  }

  .xl-rounded-6 {
    border-radius: 24px;
  }

  .xl-rounded-full {
    border-radius: 50%;
  }
  .xl-rounded-50 {
    border-radius: 50px;
  }

  /* Shadow */
  .xl-shadow-sm {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }

  .xl-shadow-md {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .xl-shadow-lg {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  }
  .xl-flex {
    display: flex;
  }

  /* Flex direction */
  .xl-flex-row {
    flex-direction: row;
  }

  .xl-flex-col {
    flex-direction: column;
  }

  /* Flex wrap */
  .xl-flex-wrap {
    flex-wrap: wrap;
  }

  /* Justify content */
  .xl-justify-start {
    justify-content: flex-start;
  }

  .xl-justify-end {
    justify-content: flex-end;
  }

  .xl-justify-center {
    justify-content: center;
  }

  .xl-justify-between {
    justify-content: space-between;
  }

  .xl-justify-around {
    justify-content: space-around;
  }

  /* Align items */
  .xl-items-start {
    align-items: flex-start;
  }

  .xl-items-end {
    align-items: flex-end;
  }

  .xl-items-center {
    align-items: center;
  }

  .xl-items-baseline {
    align-items: baseline;
  }

  .xl-items-stretch {
    align-items: stretch;
  }

  /* Align content */
  .xl-content-start {
    align-content: flex-start;
  }

  .xl-content-end {
    align-content: flex-end;
  }

  .xl-content-center {
    align-content: center;
  }

  .xl-content-between {
    align-content: space-between;
  }

  .xl-content-around {
    align-content: space-around;
  }

  .xl-content-stretch {
    align-content: stretch;
  }

  /* Flex item */
  .xl-flex-1 {
    flex: 1;
  }

  .xl-flex-auto {
    flex: auto;
  }

  .xl-flex-initial {
    flex: initial;
  }

  .xl-flex-none {
    flex: none;
  }

  /* Align self */
  .xl-self-auto {
    align-self: auto;
  }

  .xl-self-start {
    align-self: flex-start;
  }

  .xl-self-end {
    align-self: flex-end;
  }

  .xl-self-center {
    align-self: center;
  }

  .xl-self-stretch {
    align-self: stretch;
  }
  .xl-gap-1 {
    gap: 4px;
  }

  .xl-gap-2 {
    gap: 8px;
  }

  .xl-gap-3 {
    gap: 16px;
  }

  .xl-gap-4 {
    gap: 24px;
  }

  .xl-gap-5 {
    gap: 32px;
  }
  .xl-gap-6 {
    gap: 40px;
  }
  .xl-gap-7 {
    gap: 48px;
  }
  .xl-gap-8 {
    gap: 56px;
  }
  .xl-gap-9 {
    gap: 64px;
  }
  .xl-gap-10 {
    gap: 72px;
  }
  .xl-gap-11 {
    gap: 80px;
  }
  .xl-gap-12 {
    gap: 88px;
  }
  .xl-gap-13 {
    gap: 96px;
  }
  .xl-gap-14 {
    gap: 104px;
  }
  .xl-gap-15 {
    gap: 112px;
  }
  .xl-w-1 {
    width: 10%;
  }
  .xl-w-2 {
    width: 20%;
  }
  .xl-w-3 {
    width: 30%;
  }
  .xl-w-4 {
    width: 40%;
  }
  .xl-w-5 {
    width: 50%;
  }
  .xl-w-6 {
    width: 60%;
  }
  .xl-w-7 {
    width: 70%;
  }
  .xl-w-8 {
    width: 80%;
  }
  .xl-w-9 {
    width: 90%;
  }
  .xl-w-full {
    width: 100%;
  }
  .xl-w-auto {
    width: auto;
  }
  .xl-w-fit-content {
    width: fit-content;
  }
  .xl-h-1 {
    height: 12px;
  }
  .xl-h-2 {
    height: 24px;
  }
  .xl-h-3 {
    height: 36px;
  }
  .xl-h-4 {
    height: 48px;
  }
  .xl-h-5 {
    height: 60px;
  }
  .xl-h-6 {
    height: 72px;
  }
  .xl-h-7 {
    height: 84px;
  }
  .xl-h-8 {
    height: 96px;
  }
  .xl-h-9 {
    height: 108px;
  }
  .xl-h-full {
    height: 100%;
  }
  .xl-h-screen {
    height: 100vh;
  }
  .xl-h-fit-content {
    height: fit-content;
  }

  /* Classes para posição */
  .xl-relative {
    position: relative;
  }
  .xl-absolute {
    position: absolute;
  }
  .xl-fixed {
    position: fixed;
  }
  .xl-static {
    position: static;
  }
  .xl-sticky {
    position: sticky;
  }
  /* Classes para posição */
  .xl-top-0 {
    top: 0;
  }
  .xl-right-0 {
    right: 0;
  }
  .xl-bottom-0 {
    bottom: 0;
  }
  .xl-left-0 {
    left: 0;
  }

  /* Classes para overflow */
  .xl-overflow-auto {
    overflow: auto;
  }
  .xl-overflow-hidden {
    overflow: hidden;
  }
  .xl-overflow-visible {
    overflow: visible;
  }
  .xl-overflow-scroll {
    overflow: scroll;
  }
  .xl-overflow-x-auto {
    overflow-x: auto;
  }
  .xl-overflow-x-hidden {
    overflow-x: hidden;
  }
  .xl-overflow-x-visible {
    overflow-x: visible;
  }
  .xl-overflow-x-scroll {
    overflow-x: scroll;
  }
  .xl-overflow-y-auto {
    overflow-y: auto;
  }
  .xl-overflow-y-hidden {
    overflow-y: hidden;
  }
  .xl-overflow-y-visible {
    overflow-y: visible;
  }
  .xl-overflow-y-scroll {
    overflow-y: scroll;
  }
  .xl-text-xs {
    font-size: 0.75rem;
  }
  .xl-text-sm {
    font-size: 0.875rem;
  }
  .xl-text-base {
    font-size: 1rem;
  }
  .xl-text-lg {
    font-size: 1.125rem;
  }
  .xl-text-xl {
    font-size: 1.25rem;
  }
  .xl-text-2xl {
    font-size: 1.5rem;
  }
  .xl-text-3xl {
    font-size: 1.875rem;
  }
  .xl-text-4xl {
    font-size: 2.5rem;
  }
  .xl-text-5xl {
    font-size: 3rem;
  }
  .xl-text-6xl {
    font-size: 4rem;
  }
  .xl-text-7xl {
    font-size: 5rem;
  }
  .xl-text-8xl {
    font-size: 6rem;
  }
  .xl-text-9xl {
    font-size: 6.5rem;
  }
  .xl-font-thin {
    font-weight: 100;
  }
  .xl-font-extralight {
    font-weight: 200;
  }
  .xl-font-light {
    font-weight: 300;
  }
  .xl-font-normal {
    font-weight: 400;
  }
  .xl-font-medium {
    font-weight: 500;
  }
  .xl-font-semibold {
    font-weight: 600;
  }
  .xl-font-bold {
    font-weight: 700;
  }
  .xl-font-extrabold {
    font-weight: 800;
  }
  .xl-font-black {
    font-weight: 900;
  }
  .xl-opacity-0 {
    opacity: 0;
  }

  .xl-opacity-25 {
    opacity: 0.25;
  }

  .xl-opacity-50 {
    opacity: 0.5;
  }

  .xl-opacity-75 {
    opacity: 0.75;
  }

  .xl-opacity-100 {
    opacity: 1;
  }

  .xl-leading-none {
    line-height: 1;
  }

  .xl-leading-tight {
    line-height: 1.25;
  }

  .xl-leading-normal {
    line-height: 1.5;
  }

  .xl-leading-relaxed {
    line-height: 1.625;
  }

  .xl-leading-loose {
    line-height: 2;
  }

  .xl-block {
    display: block;
  }

  .xl-inline-block {
    display: inline-block;
  }

  .xl-inline {
    display: inline;
  }

  .xl-inline-flex {
    display: inline-flex;
  }

  .xl-inline-grid {
    display: inline-grid;
  }

  .xl-table {
    display: table;
  }

  .xl-table-caption {
    display: table-caption;
  }

  .xl-table-cell {
    display: table-cell;
  }

  .xl-table-column {
    display: table-column;
  }

  .xl-table-column-group {
    display: table-column-group;
  }

  .xl-table-footer-group {
    display: table-footer-group;
  }

  .xl-table-header-group {
    display: table-header-group;
  }

  .xl-table-row {
    display: table-row;
  }

  .xl-table-row-group {
    display: table-row-group;
  }

  .xl-hidden {
    display: none !important;
  }
  /* Text Align - Extra Large Screen */
  .xl-text-left {
    text-align: left !important;
  }

  .xl-text-center {
    text-align: center !important;
  }

  .xl-text-right {
    text-align: right !important;
  }

  .xl-text-justify {
    text-align: justify !important;
  }
  .xl-aspect-ratio-custom{
    aspect-ratio: var(--aspect-ratio-custom);
  }
}

/* lg */
@media screen and (max-width: 1000px) {
  .lg-grid {
    display: grid;
  }
  .lg-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  
  .lg-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .lg-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  
  .lg-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  
  .lg-grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  
  .lg-grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  
  .lg-grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  
  .lg-grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  
  .lg-grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  
  .lg-grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  
  .lg-grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  
  .lg-grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  
  .lg-grid-cols-none {
    grid-template-columns: none;
  }
  
  /* Grid items */
  .lg-item {
    grid-column: auto;
    grid-row: auto;
  }
  
  .lg-grid-item-1 {
    grid-column: span 1 / span 1;
    width: 100%;
  }
  .lg-grid-item-2 {
    grid-column: span 2 / span 2;
    width: 100%;
  }
  .lg-grid-item-3 {
    grid-column: span 3 / span 3;
    width: 100%;
  }
  .lg-grid-item-4 {
    grid-column: span 4 / span 4;
    width: 100%;
  }
  .lg-grid-item-5 {
    grid-column: span 5 / span 5;
    width: 100%;
  }
  .lg-grid-item-6 {
    grid-column: span 6 / span 6;
    width: 100%;
  }
  .lg-grid-item-7 {
    grid-column: span 7 / span 7;
    width: 100%;
  }
  .lg-grid-item-8 {
    grid-column: span 8 / span 8;
    width: 100%;
  }
  .lg-grid-item-9 {
    grid-column: span 9 / span 9;
    width: 100%;
  }
  .lg-grid-item-10 {
    grid-column: span 10 / span 10;
    width: 100%;
  }
  .lg-grid-item-11 {
    grid-column: span 11 / span 11;
    width: 100%;
  }
  .lg-grid-item-12 {
    grid-column: span 12 / span 12;
    width: 100%;
  }
  /* Ordem */
.lg-order-1 {
  order: 1;
}
.lg-order-2 {
  order: 2;
}
.lg-order-3 {
  order: 3;
}
.lg-order-4 {
  order: 4;
}
.lg-order-5 {
  order: 5;
}
.lg-order-6 {
  order: 6;
}
.lg-order-7 {
  order: 7;
}
.lg-order-8 {
  order: 8;
}
.lg-order-9 {
  order: 9;
}
.lg-order-10 {
  order: 10;
}
.lg-order-first {
  order: -9999;
}
.lg-order-last {
  order: 9999;
}
.lg-order-none {
  order: 0;
}
  .lg-p-0{
    padding: 0;
  }
  .lg-p-1 {
    padding: 4px;
  }

  .lg-p-2 {
    padding: 8px;
  }

  .lg-p-3 {
    padding: 12px;
  }

  .lg-p-4 {
    padding: 16px;
  }

  .lg-p-5 {
    padding: 20px;
  }

  .lg-p-6 {
    padding: 24px;
  }

  .lg-p-7 {
    padding: 28px;
  }

  .lg-p-8 {
    padding: 32px;
  }

  .lg-p-9 {
    padding: 36px;
  }

  .lg-p-10 {
    padding: 40px;
  }

  .lg-p-11 {
    padding: 44px;
  }

  .lg-p-12 {
    padding: 48px;
  }

  .lg-p-13 {
    padding: 52px;
  }

  .lg-p-14 {
    padding: 56px;
  }

  .lg-p-15 {
    padding: 60px;
  }

  .lg-p-16 {
    padding: 64px;
  }

  .lg-p-17 {
    padding: 68px;
  }

  .lg-p-18 {
    padding: 72px;
  }

  .lg-p-19 {
    padding: 76px;
  }

  .lg-p-20 {
    padding: 80px;
  }

  .lg-p-21 {
    padding: 84px;
  }

  .lg-p-22 {
    padding: 88px;
  }

  .lg-p-23 {
    padding: 92px;
  }

  .lg-p-24 {
    padding: 96px;
  }

  .lg-p-25 {
    padding: 100px;
  }

  .lg-p-26 {
    padding: 104px;
  }

  .lg-p-27 {
    padding: 108px;
  }

  .lg-p-28 {
    padding: 112px;
  }

  .lg-p-29 {
    padding: 116px;
  }

  .lg-p-30 {
    padding: 120px;
  }

  /* Classes de padding com o nome "p-posicao-valor" */

  .lg-pt-1 {
    padding-top: 4px;
  }

  .lg-pt-2 {
    padding-top: 8px;
  }

  .lg-pt-3 {
    padding-top: 12px;
  }

  .lg-pt-4 {
    padding-top: 16px;
  }

  .lg-pt-5 {
    padding-top: 20px;
  }

  .lg-pt-6 {
    padding-top: 24px;
  }

  .lg-pt-7 {
    padding-top: 28px;
  }

  .lg-pt-8 {
    padding-top: 32px;
  }

  .lg-pt-9 {
    padding-top: 36px;
  }

  .lg-pt-10 {
    padding-top: 40px;
  }

  .lg-pt-11 {
    padding-top: 44px;
  }

  .lg-pt-12 {
    padding-top: 48px;
  }

  .lg-pt-13 {
    padding-top: 52px;
  }

  .lg-pt-14 {
    padding-top: 56px;
  }

  .lg-pt-15 {
    padding-top: 60px;
  }

  .lg-pt-16 {
    padding-top: 64px;
  }

  .lg-pt-17 {
    padding-top: 68px;
  }

  .lg-pt-18 {
    padding-top: 72px;
  }

  .lg-pt-19 {
    padding-top: 76px;
  }

  .lg-pt-20 {
    padding-top: 80px;
  }

  .lg-pt-21 {
    padding-top: 84px;
  }

  .lg-pt-22 {
    padding-top: 88px;
  }

  .lg-pt-23 {
    padding-top: 92px;
  }

  .lg-pt-24 {
    padding-top: 96px;
  }

  .lg-pt-25 {
    padding-top: 100px;
  }

  .lg-pt-26 {
    padding-top: 104;
  }

  .lg-pt-27 {
    padding-top: 108px;
  }

  .lg-pt-28 {
    padding-top: 112px;
  }

  .lg-pt-29 {
    padding-top: 116px;
  }

  .lg-pt-30 {
    padding-top: 120px;
  }

  .lg-pr-1 {
    padding-right: 4px;
  }

  .lg-pr-2 {
    padding-right: 8px;
  }

  .lg-pr-3 {
    padding-right: 12px;
  }

  .lg-pr-4 {
    padding-right: 16px;
  }

  .lg-pr-5 {
    padding-right: 20px;
  }

  .lg-pr-6 {
    padding-right: 24px;
  }

  .lg-pr-7 {
    padding-right: 28px;
  }

  .lg-pr-8 {
    padding-right: 32px;
  }

  .lg-pr-9 {
    padding-right: 36px;
  }

  .lg-pr-10 {
    padding-right: 40px;
  }

  .lg-pr-11 {
    padding-right: 44px;
  }

  .lg-pr-12 {
    padding-right: 48px;
  }

  .lg-pr-13 {
    padding-right: 52px;
  }

  .lg-pr-14 {
    padding-right: 56px;
  }

  .lg-pr-15 {
    padding-right: 60px;
  }

  .lg-pr-16 {
    padding-right: 64px;
  }

  .lg-pr-17 {
    padding-right: 68px;
  }

  .lg-pr-18 {
    padding-right: 72px;
  }

  .lg-pr-19 {
    padding-right: 76px;
  }

  .lg-pr-20 {
    padding-right: 80px;
  }

  .lg-pr-21 {
    padding-right: 84px;
  }

  .lg-pr-22 {
    padding-right: 88px;
  }

  .lg-pr-23 {
    padding-right: 92px;
  }

  .lg-pr-24 {
    padding-right: 96px;
  }

  .lg-pr-25 {
    padding-right: 100px;
  }

  .lg-pr-26 {
    padding-right: 104px;
  }

  .lg-pr-27 {
    padding-right: 108px;
  }

  .lg-pr-28 {
    padding-right: 112px;
  }

  .lg-pr-29 {
    padding-right: 116px;
  }

  .lg-pr-30 {
    padding-right: 120px;
  }

  .lg-pb-1 {
    padding-bottom: 4px;
  }

  .lg-pb-2 {
    padding-bottom: 8px;
  }

  .lg-pb-3 {
    padding-bottom: 12px;
  }

  .lg-pb-4 {
    padding-bottom: 16px;
  }

  .lg-pb-5 {
    padding-bottom: 20px;
  }

  .lg-pb-6 {
    padding-bottom: 24px;
  }

  .lg-pb-7 {
    padding-bottom: 28px;
  }

  .lg-pb-8 {
    padding-bottom: 32px;
  }

  .lg-pb-9 {
    padding-bottom: 36px;
  }

  .lg-pb-10 {
    padding-bottom: 40px;
  }

  .lg-pb-11 {
    padding-bottom: 44px;
  }

  .lg-pb-12 {
    padding-bottom: 48px;
  }

  .lg-pb-13 {
    padding-bottom: 52px;
  }

  .lg-pb-14 {
    padding-bottom: 56px;
  }

  .lg-pb-15 {
    padding-bottom: 60px;
  }

  .lg-pb-16 {
    padding-bottom: 64px;
  }

  .lg-pb-17 {
    padding-bottom: 68px;
  }

  .lg-pb-18 {
    padding-bottom: 72px;
  }

  .lg-pb-19 {
    padding-bottom: 76px;
  }

  .lg-pb-20 {
    padding-bottom: 80px;
  }

  .lg-pb-21 {
    padding-bottom: 84px;
  }

  .lg-pb-22 {
    padding-bottom: 88px;
  }

  .lg-pb-23 {
    padding-bottom: 92px;
  }

  .lg-pb-24 {
    padding-bottom: 96px;
  }

  .lg-pb-25 {
    padding-bottom: 100px;
  }

  .lg-pb-26 {
    padding-bottom: 104px;
  }

  .lg-pb-27 {
    padding-bottom: 108px;
  }

  .lg-pb-28 {
    padding-bottom: 112px;
  }

  .lg-pb-29 {
    padding-bottom: 116px;
  }

  .lg-pb-30 {
    padding-bottom: 120px;
  }

  .lg-pl-1 {
    padding-left: 4px;
  }

  .lg-pl-2 {
    padding-left: 8px;
  }

  .lg-pl-3 {
    padding-left: 12px;
  }

  .lg-pl-4 {
    padding-left: 16px;
  }

  .lg-pl-5 {
    padding-left: 20px;
  }

  .lg-pl-6 {
    padding-left: 24px;
  }

  .lg-pl-7 {
    padding-left: 28px;
  }

  .lg-pl-8 {
    padding-left: 32px;
  }

  .lg-pl-9 {
    padding-left: 36px;
  }

  .lg-pl-10 {
    padding-left: 40px;
  }

  .lg-pl-11 {
    padding-left: 44px;
  }

  .lg-pl-12 {
    padding-left: 48px;
  }

  .lg-pl-13 {
    padding-left: 52px;
  }

  .lg-pl-14 {
    padding-left: 56px;
  }

  .lg-pl-15 {
    padding-left: 60px;
  }

  .lg-pl-16 {
    padding-left: 64px;
  }

  .lg-pl-17 {
    padding-left: 68px;
  }

  .lg-pl-18 {
    padding-left: 72px;
  }

  .lg-pl-19 {
    padding-left: 76px;
  }

  .lg-pl-20 {
    padding-left: 80px;
  }

  .lg-pl-21 {
    padding-left: 84px;
  }

  .lg-pl-22 {
    padding-left: 88px;
  }

  .lg-pl-23 {
    padding-left: 92px;
  }

  .lg-pl-24 {
    padding-left: 96px;
  }

  .lg-pl-25 {
    padding-left: 100px;
  }

  .lg-pl-26 {
    padding-left: 104px;
  }

  .lg-pl-27 {
    padding-left: 108px;
  }

  .lg-pl-28 {
    padding-left: 112px;
  }

  .lg-pl-29 {
    padding-left: 116px;
  }

  .lg-pl-30 {
    padding-left: 120px;
  }

  /* Classes de padding vertical com o nome "py-valor" */
  .lg-py-1 {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .lg-py-2 {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .lg-py-3 {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .lg-py-4 {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .lg-py-5 {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .lg-py-6 {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .lg-py-7 {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .lg-py-8 {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .lg-py-9 {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .lg-py-10 {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .lg-py-11 {
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .lg-py-12 {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .lg-py-13 {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  .lg-py-14 {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .lg-py-15 {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .lg-py-16 {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .lg-py-17 {
    padding-top: 68px;
    padding-bottom: 68px;
  }

  .lg-py-18 {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .lg-py-19 {
    padding-top: 76px;
    padding-bottom: 76px;
  }

  .lg-py-20 {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .lg-py-21 {
    padding-top: 84px;
    padding-bottom: 84px;
  }

  .lg-py-22 {
    padding-top: 88px;
    padding-bottom: 88px;
  }

  .lg-py-23 {
    padding-top: 92px;
    padding-bottom: 92px;
  }

  .lg-py-24 {
    padding-top: 96px;
    padding-bottom: 96px;
  }

  .lg-py-25 {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .lg-py-26 {
    padding-top: 104px;
    padding-bottom: 104px;
  }

  .lg-py-27 {
    padding-top: 108px;
    padding-bottom: 108px;
  }

  .lg-py-28 {
    padding-top: 112px;
    padding-bottom: 112px;
  }

  .lg-py-29 {
    padding-top: 116px;
    padding-bottom: 116px;
  }

  .lg-py-30 {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  /* Classes de padding com o nome "px-valor" */
  .lg-px-1 {
    padding-left: 4px;
    padding-right: 4px;
  }

  .lg-px-2 {
    padding-left: 8px;
    padding-right: 8px;
  }

  .lg-px-3 {
    padding-left: 12px;
    padding-right: 12px;
  }

  .lg-px-4 {
    padding-left: 16px;
    padding-right: 16px;
  }

  .lg-px-5 {
    padding-left: 20px;
    padding-right: 20px;
  }

  .lg-px-6 {
    padding-left: 24px;
    padding-right: 24px;
  }

  .lg-px-7 {
    padding-left: 28px;
    padding-right: 28px;
  }

  .lg-px-8 {
    padding-left: 32px;
    padding-right: 32px;
  }

  .lg-px-9 {
    padding-left: 36px;
    padding-right: 36px;
  }

  .lg-px-10 {
    padding-left: 40px;
    padding-right: 40px;
  }

  .lg-px-11 {
    padding-left: 44px;
    padding-right: 44px;
  }

  .lg-px-12 {
    padding-left: 48px;
    padding-right: 48px;
  }

  .lg-px-13 {
    padding-left: 52px;
    padding-right: 52px;
  }

  .lg-px-14 {
    padding-left: 56px;
    padding-right: 56px;
  }

  .lg-px-15 {
    padding-left: 60px;
    padding-right: 60px;
  }

  .lg-px-16 {
    padding-left: 64px;
    padding-right: 64px;
  }

  .lg-px-17 {
    padding-left: 68px;
    padding-right: 68px;
  }

  .lg-px-18 {
    padding-left: 72px;
    padding-right: 72px;
  }

  .lg-px-19 {
    padding-left: 76px;
    padding-right: 76px;
  }

  .lg-px-20 {
    padding-left: 80px;
    padding-right: 80px;
  }

  .lg-px-21 {
    padding-left: 84px;
    padding-right: 84px;
  }

  .lg-px-22 {
    padding-left: 88px;
    padding-right: 88px;
  }

  .lg-px-23 {
    padding-left: 92px;
    padding-right: 92px;
  }

  .lg-px-24 {
    padding-left: 96px;
    padding-right: 96px;
  }

  .lg-px-25 {
    padding-left: 100px;
    padding-right: 100px;
  }

  .lg-px-26 {
    padding-left: 104px;
    padding-right: 104px;
  }

  .lg-px-27 {
    padding-left: 108px;
    padding-right: 108px;
  }

  .lg-px-28 {
    padding-left: 112px;
    padding-right: 112px;
  }

  .lg-px-29 {
    padding-left: 116px;
    padding-right: 116px;
  }

  .lg-px-30 {
    padding-left: 120px;
    padding-right: 120px;
  }

  /* PADDING PORCENTAGEM */

  .lg-p-1P {
    padding: 4%;
  }

  .lg-p-2P {
    padding: 8%;
  }

  .lg-p-3P {
    padding: 12%;
  }

  /* Classes de margin com o nome "p-valor" */
  .lg-m-1 {
    margin: 4px;
  }

  .lg-m-2 {
    margin: 8px;
  }

  .lg-m-3 {
    margin: 12px;
  }

  .lg-m-4 {
    margin: 16px;
  }

  .lg-m-5 {
    margin: 20px;
  }

  .lg-m-6 {
    margin: 24px;
  }

  .lg-m-7 {
    margin: 28px;
  }

  .lg-m-8 {
    margin: 32px;
  }

  .lg-m-9 {
    margin: 36px;
  }

  .lg-m-10 {
    margin: 40px;
  }

  .lg-m-11 {
    margin: 44px;
  }

  .lg-m-12 {
    margin: 48px;
  }

  .lg-m-13 {
    margin: 52px;
  }

  .lg-m-14 {
    margin: 56px;
  }

  .lg-m-15 {
    margin: 60px;
  }

  .lg-m-16 {
    margin: 64px;
  }

  .lg-m-17 {
    margin: 68px;
  }

  .lg-m-18 {
    margin: 72px;
  }

  .lg-m-19 {
    margin: 76px;
  }

  .lg-m-20 {
    margin: 80px;
  }

  .lg-m-21 {
    margin: 84px;
  }

  .lg-m-22 {
    margin: 88px;
  }

  .lg-m-23 {
    margin: 92px;
  }

  .lg-m-24 {
    margin: 96px;
  }

  .lg-m-25 {
    margin: 100px;
  }

  .lg-m-26 {
    margin: 104px;
  }

  .lg-m-27 {
    margin: 108px;
  }

  .lg-m-28 {
    margin: 112px;
  }

  .lg-m-29 {
    margin: 116px;
  }

  .lg-m-30 {
    margin: 120px;
  }

  /* Classes de margin com o nome "p-posicao-valor" */

  .lg-mt-1 {
    margin-top: 4px;
  }

  .lg-mt-2 {
    margin-top: 8px;
  }

  .lg-mt-3 {
    margin-top: 12px;
  }

  .lg-mt-4 {
    margin-top: 16px;
  }

  .lg-mt-5 {
    margin-top: 20px;
  }

  .lg-mt-6 {
    margin-top: 24px;
  }

  .lg-mt-7 {
    margin-top: 28px;
  }

  .lg-mt-8 {
    margin-top: 32px;
  }

  .lg-mt-9 {
    margin-top: 36px;
  }

  .lg-mt-10 {
    margin-top: 40px;
  }

  .lg-mt-11 {
    margin-top: 44px;
  }

  .lg-mt-12 {
    margin-top: 48px;
  }

  .lg-mt-13 {
    margin-top: 52px;
  }

  .lg-mt-14 {
    margin-top: 56px;
  }

  .lg-mt-15 {
    margin-top: 60px;
  }

  .lg-mt-16 {
    margin-top: 64px;
  }

  .lg-mt-17 {
    margin-top: 68px;
  }

  .lg-mt-18 {
    margin-top: 72px;
  }

  .lg-mt-19 {
    margin-top: 76px;
  }

  .lg-mt-20 {
    margin-top: 80px;
  }

  .lg-mt-21 {
    margin-top: 84px;
  }

  .lg-mt-22 {
    margin-top: 88px;
  }

  .lg-mt-23 {
    margin-top: 92px;
  }

  .lg-mt-24 {
    margin-top: 96px;
  }

  .lg-mt-25 {
    margin-top: 100px;
  }

  .lg-mt-26 {
    margin-top: 104;
  }

  .lg-mt-27 {
    margin-top: 108px;
  }

  .lg-mt-28 {
    margin-top: 112px;
  }

  .lg-mt-29 {
    margin-top: 116px;
  }

  .lg-mt-30 {
    margin-top: 120px;
  }

  .lg-mr-1 {
    margin-right: 4px;
  }

  .lg-mr-2 {
    margin-right: 8px;
  }

  .lg-mr-3 {
    margin-right: 12px;
  }

  .lg-mr-4 {
    margin-right: 16px;
  }

  .lg-mr-5 {
    margin-right: 20px;
  }

  .lg-mr-6 {
    margin-right: 24px;
  }

  .lg-mr-7 {
    margin-right: 28px;
  }

  .lg-mr-8 {
    margin-right: 32px;
  }

  .lg-mr-9 {
    margin-right: 36px;
  }

  .lg-mr-10 {
    margin-right: 40px;
  }

  .lg-mr-11 {
    margin-right: 44px;
  }

  .lg-mr-12 {
    margin-right: 48px;
  }

  .lg-mr-13 {
    margin-right: 52px;
  }

  .lg-mr-14 {
    margin-right: 56px;
  }

  .lg-mr-15 {
    margin-right: 60px;
  }

  .lg-mr-16 {
    margin-right: 64px;
  }

  .lg-mr-17 {
    margin-right: 68px;
  }

  .lg-mr-18 {
    margin-right: 72px;
  }

  .lg-mr-19 {
    margin-right: 76px;
  }

  .lg-mr-20 {
    margin-right: 80px;
  }

  .lg-mr-21 {
    margin-right: 84px;
  }

  .lg-mr-22 {
    margin-right: 88px;
  }

  .lg-mr-23 {
    margin-right: 92px;
  }

  .lg-mr-24 {
    margin-right: 96px;
  }

  .lg-mr-25 {
    margin-right: 100px;
  }

  .lg-mr-26 {
    margin-right: 104px;
  }

  .lg-mr-27 {
    margin-right: 108px;
  }

  .lg-mr-28 {
    margin-right: 112px;
  }

  .lg-mr-29 {
    margin-right: 116px;
  }

  .lg-mr-30 {
    margin-right: 120px;
  }

  .lg-mb-1 {
    margin-bottom: 4px;
  }

  .lg-mb-2 {
    margin-bottom: 8px;
  }

  .lg-mb-3 {
    margin-bottom: 12px;
  }

  .lg-mb-4 {
    margin-bottom: 16px;
  }

  .lg-mb-5 {
    margin-bottom: 20px;
  }

  .lg-mb-6 {
    margin-bottom: 24px;
  }

  .lg-mb-7 {
    margin-bottom: 28px;
  }

  .lg-mb-8 {
    margin-bottom: 32px;
  }

  .lg-mb-9 {
    margin-bottom: 36px;
  }

  .lg-mb-10 {
    margin-bottom: 40px;
  }

  .lg-mb-11 {
    margin-bottom: 44px;
  }

  .lg-mb-12 {
    margin-bottom: 48px;
  }

  .lg-mb-13 {
    margin-bottom: 52px;
  }

  .lg-mb-14 {
    margin-bottom: 56px;
  }

  .lg-mb-15 {
    margin-bottom: 60px;
  }

  .lg-mb-16 {
    margin-bottom: 64px;
  }

  .lg-mb-17 {
    margin-bottom: 68px;
  }

  .lg-mb-18 {
    margin-bottom: 72px;
  }

  .lg-mb-19 {
    margin-bottom: 76px;
  }

  .lg-mb-20 {
    margin-bottom: 80px;
  }

  .lg-mb-21 {
    margin-bottom: 84px;
  }

  .lg-mb-22 {
    margin-bottom: 88px;
  }

  .lg-mb-23 {
    margin-bottom: 92px;
  }

  .lg-mb-24 {
    margin-bottom: 96px;
  }

  .lg-mb-25 {
    margin-bottom: 100px;
  }

  .lg-mb-26 {
    margin-bottom: 104px;
  }

  .lg-mb-27 {
    margin-bottom: 108px;
  }

  .lg-mb-28 {
    margin-bottom: 112px;
  }

  .lg-mb-29 {
    margin-bottom: 116px;
  }

  .lg-mb-30 {
    margin-bottom: 120px;
  }

  .lg-ml-1 {
    margin-left: 4px;
  }

  .lg-ml-2 {
    margin-left: 8px;
  }

  .lg-ml-3 {
    margin-left: 12px;
  }

  .lg-ml-4 {
    margin-left: 16px;
  }

  .lg-ml-5 {
    margin-left: 20px;
  }

  .lg-ml-6 {
    margin-left: 24px;
  }

  .lg-ml-7 {
    margin-left: 28px;
  }

  .lg-ml-8 {
    margin-left: 32px;
  }

  .lg-ml-9 {
    margin-left: 36px;
  }

  .lg-ml-10 {
    margin-left: 40px;
  }

  .lg-ml-11 {
    margin-left: 44px;
  }

  .lg-ml-12 {
    margin-left: 48px;
  }

  .lg-ml-13 {
    margin-left: 52px;
  }

  .lg-ml-14 {
    margin-left: 56px;
  }

  .lg-ml-15 {
    margin-left: 60px;
  }

  .lg-ml-16 {
    margin-left: 64px;
  }

  .lg-ml-17 {
    margin-left: 68px;
  }

  .lg-ml-18 {
    margin-left: 72px;
  }

  .lg-ml-19 {
    margin-left: 76px;
  }

  .lg-ml-20 {
    margin-left: 80px;
  }

  .lg-ml-21 {
    margin-left: 84px;
  }

  .lg-ml-22 {
    margin-left: 88px;
  }

  .lg-ml-23 {
    margin-left: 92px;
  }

  .lg-ml-24 {
    margin-left: 96px;
  }

  .lg-ml-25 {
    margin-left: 100px;
  }

  .lg-ml-26 {
    margin-left: 104px;
  }

  .lg-ml-27 {
    margin-left: 108px;
  }

  .lg-ml-28 {
    margin-left: 112px;
  }

  .lg-ml-29 {
    margin-left: 116px;
  }

  .lg-ml-30 {
    margin-left: 120px;
  }

  /* Classes de margin vertical com o nome "py-valor" */
  .lg-my-1 {
    margin-top: 4px;
    margin-bottom: 4px;
  }

  .lg-my-2 {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .lg-my-3 {
    margin-top: 12px;
    margin-bottom: 12px;
  }

  .lg-my-4 {
    margin-top: 16px;
    margin-bottom: 16px;
  }

  .lg-my-5 {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .lg-my-6 {
    margin-top: 24px;
    margin-bottom: 24px;
  }

  .lg-my-7 {
    margin-top: 28px;
    margin-bottom: 28px;
  }

  .lg-my-8 {
    margin-top: 32px;
    margin-bottom: 32px;
  }

  .lg-my-9 {
    margin-top: 36px;
    margin-bottom: 36px;
  }

  .lg-my-10 {
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .lg-my-11 {
    margin-top: 44px;
    margin-bottom: 44px;
  }

  .lg-my-12 {
    margin-top: 48px;
    margin-bottom: 48px;
  }

  .lg-my-13 {
    margin-top: 52px;
    margin-bottom: 52px;
  }

  .lg-my-14 {
    margin-top: 56px;
    margin-bottom: 56px;
  }

  .lg-my-15 {
    margin-top: 60px;
    margin-bottom: 60px;
  }

  .lg-my-16 {
    margin-top: 64px;
    margin-bottom: 64px;
  }

  .lg-my-17 {
    margin-top: 68px;
    margin-bottom: 68px;
  }

  .lg-my-18 {
    margin-top: 72px;
    margin-bottom: 72px;
  }

  .lg-my-19 {
    margin-top: 76px;
    margin-bottom: 76px;
  }

  .lg-my-20 {
    margin-top: 80px;
    margin-bottom: 80px;
  }

  .lg-my-21 {
    margin-top: 84px;
    margin-bottom: 84px;
  }

  .lg-my-22 {
    margin-top: 88px;
    margin-bottom: 88px;
  }

  .lg-my-23 {
    margin-top: 92px;
    margin-bottom: 92px;
  }

  .lg-my-24 {
    margin-top: 96px;
    margin-bottom: 96px;
  }

  .lg-my-25 {
    margin-top: 100px;
    margin-bottom: 100px;
  }

  .lg-my-26 {
    margin-top: 104px;
    margin-bottom: 104px;
  }

  .lg-my-27 {
    margin-top: 108px;
    margin-bottom: 108px;
  }

  .lg-my-28 {
    margin-top: 112px;
    margin-bottom: 112px;
  }

  .lg-my-29 {
    margin-top: 116px;
    margin-bottom: 116px;
  }

  .lg-my-30 {
    margin-top: 120px;
    margin-bottom: 120px;
  }

  /* Classes de margin com o nome "px-valor" */
  .lg-px-1 {
    margin-left: 4px;
    margin-right: 4px;
  }

  .lg-mx-2 {
    margin-left: 8px;
    margin-right: 8px;
  }

  .lg-mx-3 {
    margin-left: 12px;
    margin-right: 12px;
  }

  .lg-mx-4 {
    margin-left: 16px;
    margin-right: 16px;
  }

  .lg-mx-5 {
    margin-left: 20px;
    margin-right: 20px;
  }

  .lg-mx-6 {
    margin-left: 24px;
    margin-right: 24px;
  }

  .lg-mx-7 {
    margin-left: 28px;
    margin-right: 28px;
  }

  .lg-mx-8 {
    margin-left: 32px;
    margin-right: 32px;
  }

  .lg-mx-9 {
    margin-left: 36px;
    margin-right: 36px;
  }

  .lg-mx-10 {
    margin-left: 40px;
    margin-right: 40px;
  }

  .lg-mx-11 {
    margin-left: 44px;
    margin-right: 44px;
  }

  .lg-mx-12 {
    margin-left: 48px;
    margin-right: 48px;
  }

  .lg-mx-13 {
    margin-left: 52px;
    margin-right: 52px;
  }

  .lg-mx-14 {
    margin-left: 56px;
    margin-right: 56px;
  }

  .lg-mx-15 {
    margin-left: 60px;
    margin-right: 60px;
  }

  .lg-mx-16 {
    margin-left: 64px;
    margin-right: 64px;
  }

  .lg-mx-17 {
    margin-left: 68px;
    margin-right: 68px;
  }

  .lg-mx-18 {
    margin-left: 72px;
    margin-right: 72px;
  }

  .lg-mx-19 {
    margin-left: 76px;
    margin-right: 76px;
  }

  .lg-mx-20 {
    margin-left: 80px;
    margin-right: 80px;
  }

  .lg-mx-21 {
    margin-left: 84px;
    margin-right: 84px;
  }

  .lg-mx-22 {
    margin-left: 88px;
    margin-right: 88px;
  }

  .lg-mx-23 {
    margin-left: 92px;
    margin-right: 92px;
  }

  .lg-mx-24 {
    margin-left: 96px;
    margin-right: 96px;
  }

  .lg-mx-25 {
    margin-left: 100px;
    margin-right: 100px;
  }

  .lg-mx-26 {
    margin-left: 104px;
    margin-right: 104px;
  }

  .lg-mx-27 {
    margin-left: 108px;
    margin-right: 108px;
  }

  .lg-mx-28 {
    margin-left: 112px;
    margin-right: 112px;
  }

  .lg-mx-29 {
    margin-left: 116px;
    margin-right: 116px;
  }

  .lg-mx-30 {
    margin-left: 120px;
    margin-right: 120px;
  }

  /* Margin Porcentagem */
  .lg-m-1P {
    margin: 4%;
  }

  .lg-m-2P {
    margin: 8%;
  }

  .lg-m-3P {
    margin: 12%;
  }

  /* Border radius */
  .lg-rounded-1 {
    border-radius: 4px;
  }

  .lg-rounded-2 {
    border-radius: 8px;
  }

  .lg-rounded-3 {
    border-radius: 12px;
  }

  .lg-rounded-4 {
    border-radius: 16px;
  }

  .lg-rounded-5 {
    border-radius: 20px;
  }

  .lg-rounded-6 {
    border-radius: 24px;
  }

  .lg-rounded-full {
    border-radius: 50%;
  }
  .lg-rounded-50 {
    border-radius: 50px;
  }

  /* Shadow */
  .lg-shadow-sm {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }

  .lg-shadow-md {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .lg-shadow-lg {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  }
  .lg-flex {
    display: flex;
  }

  /* Flex direction */
  .lg-flex-row {
    flex-direction: row;
  }

  .lg-flex-col {
    flex-direction: column;
  }

  /* Flex wrap */
  .lg-flex-wrap {
    flex-wrap: wrap;
  }

  /* Justify content */
  .lg-justify-start {
    justify-content: flex-start;
  }

  .lg-justify-end {
    justify-content: flex-end;
  }

  .lg-justify-center {
    justify-content: center;
  }

  .lg-justify-between {
    justify-content: space-between;
  }

  .lg-justify-around {
    justify-content: space-around;
  }

  /* Align items */
  .lg-items-start {
    align-items: flex-start;
  }

  .lg-items-end {
    align-items: flex-end;
  }

  .lg-items-center {
    align-items: center;
  }

  .lg-items-baseline {
    align-items: baseline;
  }

  .lg-items-stretch {
    align-items: stretch;
  }

  /* Align content */
  .lg-content-start {
    align-content: flex-start;
  }

  .lg-content-end {
    align-content: flex-end;
  }

  .lg-content-center {
    align-content: center;
  }

  .lg-content-between {
    align-content: space-between;
  }

  .lg-content-around {
    align-content: space-around;
  }

  .lg-content-stretch {
    align-content: stretch;
  }

  /* Flex item */
  .lg-flex-1 {
    flex: 1;
  }

  .lg-flex-auto {
    flex: auto;
  }

  .lg-flex-initial {
    flex: initial;
  }

  .lg-flex-none {
    flex: none;
  }

  /* Align self */
  .lg-self-auto {
    align-self: auto;
  }

  .lg-self-start {
    align-self: flex-start;
  }

  .lg-self-end {
    align-self: flex-end;
  }

  .lg-self-center {
    align-self: center;
  }

  .lg-self-stretch {
    align-self: stretch;
  }
  .lg-gap-1 {
    gap: 4px;
  }

  .lg-gap-2 {
    gap: 8px;
  }

  .lg-gap-3 {
    gap: 16px;
  }

  .lg-gap-4 {
    gap: 24px;
  }

  .lg-gap-5 {
    gap: 32px;
  }
  .lg-gap-6 {
    gap: 40px;
  }
  .lg-gap-7 {
    gap: 48px;
  }
  .lg-gap-8 {
    gap: 56px;
  }
  .lg-gap-9 {
    gap: 64px;
  }
  .lg-gap-10 {
    gap: 72px;
  }
  .lg-gap-11 {
    gap: 80px;
  }
  .lg-gap-12 {
    gap: 88px;
  }
  .lg-gap-13 {
    gap: 96px;
  }
  .lg-gap-14 {
    gap: 104px;
  }
  .lg-gap-15 {
    gap: 112px;
  }
  .lg-w-1 {
    width: 10%;
  }
  .lg-w-2 {
    width: 20%;
  }
  .lg-w-3 {
    width: 30%;
  }
  .lg-w-4 {
    width: 40%;
  }
  .lg-w-5 {
    width: 50%;
  }
  .lg-w-6 {
    width: 60%;
  }
  .lg-w-7 {
    width: 70%;
  }
  .lg-w-8 {
    width: 80%;
  }
  .lg-w-9 {
    width: 90%;
  }
  .lg-w-full {
    width: 100%;
  }
  .lg-w-auto {
    width: auto;
  }
  .lg-w-fit-content {
    width: fit-content;
  }
  .lg-h-1 {
    height: 12px;
  }
  .lg-h-2 {
    height: 24px;
  }
  .lg-h-3 {
    height: 36px;
  }
  .lg-h-4 {
    height: 48px;
  }
  .lg-h-5 {
    height: 60px;
  }
  .lg-h-6 {
    height: 72px;
  }
  .lg-h-7 {
    height: 84px;
  }
  .lg-h-8 {
    height: 96px;
  }
  .lg-h-9 {
    height: 108px;
  }
  .lg-h-full {
    height: 100%;
  }
  .lg-h-screen {
    height: 100vh;
  }
  .lg-h-fit-content {
    height: fit-content;
  }

  /* Classes para posição */
  .lg-relative {
    position: relative;
  }
  .lg-absolute {
    position: absolute;
  }
  .lg-fixed {
    position: fixed;
  }
  .lg-static {
    position: static;
  }
  .lg-sticky {
    position: sticky;
  }
  /* Classes para posição */
  .lg-top-0 {
    top: 0;
  }
  .lg-right-0 {
    right: 0;
  }
  .lg-bottom-0 {
    bottom: 0;
  }
  .lg-left-0 {
    left: 0;
  }

  /* Classes para overflow */
  .lg-overflow-auto {
    overflow: auto;
  }
  .lg-overflow-hidden {
    overflow: hidden;
  }
  .lg-overflow-visible {
    overflow: visible;
  }
  .lg-overflow-scroll {
    overflow: scroll;
  }
  .lg-overflow-x-auto {
    overflow-x: auto;
  }
  .lg-overflow-x-hidden {
    overflow-x: hidden;
  }
  .lg-overflow-x-visible {
    overflow-x: visible;
  }
  .lg-overflow-x-scroll {
    overflow-x: scroll;
  }
  .lg-overflow-y-auto {
    overflow-y: auto;
  }
  .lg-overflow-y-hidden {
    overflow-y: hidden;
  }
  .lg-overflow-y-visible {
    overflow-y: visible;
  }
  .lg-overflow-y-scroll {
    overflow-y: scroll;
  }
  .lg-text-xs {
    font-size: 0.75rem;
  }
  .lg-text-sm {
    font-size: 0.875rem;
  }
  .lg-text-base {
    font-size: 1rem;
  }
  .lg-text-lg {
    font-size: 1.125rem;
  }
  .lg-text-xl {
    font-size: 1.25rem;
  }
  .lg-text-2xl {
    font-size: 1.5rem;
  }
  .lg-text-3xl {
    font-size: 1.875rem;
  }
  .lg-text-4xl {
    font-size: 2.5rem;
  }
  .lg-text-5xl {
    font-size: 3rem;
  }
  .lg-text-6xl {
    font-size: 4rem;
  }
  .lg-text-7xl {
    font-size: 5rem;
  }
  .lg-text-8xl {
    font-size: 6rem;
  }
  .lg-text-9xl {
    font-size: 6.5rem;
  }
  .lg-font-thin {
    font-weight: 100;
  }
  .lg-font-extralight {
    font-weight: 200;
  }
  .lg-font-light {
    font-weight: 300;
  }
  .lg-font-normal {
    font-weight: 400;
  }
  .lg-font-medium {
    font-weight: 500;
  }
  .lg-font-semibold {
    font-weight: 600;
  }
  .lg-font-bold {
    font-weight: 700;
  }
  .lg-font-extrabold {
    font-weight: 800;
  }
  .lg-font-black {
    font-weight: 900;
  }
  .lg-opacity-0 {
    opacity: 0;
  }

  .lg-opacity-25 {
    opacity: 0.25;
  }

  .lg-opacity-50 {
    opacity: 0.5;
  }

  .lg-opacity-75 {
    opacity: 0.75;
  }

  .lg-opacity-100 {
    opacity: 1;
  }

  .lg-leading-none {
    line-height: 1;
  }

  .lg-leading-tight {
    line-height: 1.25;
  }

  .lg-leading-normal {
    line-height: 1.5;
  }

  .lg-leading-relaxed {
    line-height: 1.625;
  }

  .lg-leading-loose {
    line-height: 2;
  }

  .lg-block {
    display: block;
  }

  .lg-inline-block {
    display: inline-block;
  }

  .lg-inline {
    display: inline;
  }

  .lg-inline-flex {
    display: inline-flex;
  }

  .lg-inline-grid {
    display: inline-grid;
  }

  .lg-table {
    display: table;
  }

  .lg-table-caption {
    display: table-caption;
  }

  .lg-table-cell {
    display: table-cell;
  }

  .lg-table-column {
    display: table-column;
  }

  .lg-table-column-group {
    display: table-column-group;
  }

  .lg-table-footer-group {
    display: table-footer-group;
  }

  .lg-table-header-group {
    display: table-header-group;
  }

  .lg-table-row {
    display: table-row;
  }

  .lg-table-row-group {
    display: table-row-group;
  }

  .lg-hidden {
    display: none !important;
  }
  /* Text Align - Large Screen */
  .lg-text-left {
    text-align: left !important;
  }

  .lg-text-center {
    text-align: center !important;
  }

  .lg-text-right {
    text-align: right !important;
  }

  .lg-text-justify {
    text-align: justify !important;
  }
  .lg-aspect-ratio-custom{
    aspect-ratio: var(--aspect-ratio-custom);
  }

}

/* md */
@media screen and (max-width: 768px) {
  .md-grid {
    display: grid;
  }
  .md-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  
  .md-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .md-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  
  .md-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  
  .md-grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  
  .md-grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  
  .md-grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  
  .md-grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  
  .md-grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  
  .md-grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  
  .md-grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  
  .md-grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  
  .md-grid-cols-none {
    grid-template-columns: none;
  }
  
  /* Grid items */
  .md-item {
    grid-column: auto;
    grid-row: auto;
  }
  
  .md-grid-item-1 {
    grid-column: span 1 / span 1;
    width: 100%;
  }
  .md-grid-item-2 {
    grid-column: span 2 / span 2;
    width: 100%;
  }
  .md-grid-item-3 {
    grid-column: span 3 / span 3;
    width: 100%;
  }
  .md-grid-item-4 {
    grid-column: span 4 / span 4;
    width: 100%;
  }
  .md-grid-item-5 {
    grid-column: span 5 / span 5;
    width: 100%;
  }
  .md-grid-item-6 {
    grid-column: span 6 / span 6;
    width: 100%;
  }
  .md-grid-item-7 {
    grid-column: span 7 / span 7;
    width: 100%;
  }
  .md-grid-item-8 {
    grid-column: span 8 / span 8;
    width: 100%;
  }
  .md-grid-item-9 {
    grid-column: span 9 / span 9;
    width: 100%;
  }
  .md-grid-item-10 {
    grid-column: span 10 / span 10;
    width: 100%;
  }
  .md-grid-item-11 {
    grid-column: span 11 / span 11;
    width: 100%;
  }
  .md-grid-item-12 {
    grid-column: span 12 / span 12;
    width: 100%;
  }
  /* Ordem */
.md-order-1 {
  order: 1;
}
.md-order-2 {
  order: 2;
}
.md-order-3 {
  order: 3;
}
.md-order-4 {
  order: 4;
}
.md-order-5 {
  order: 5;
}
.md-order-6 {
  order: 6;
}
.md-order-7 {
  order: 7;
}
.md-order-8 {
  order: 8;
}
.md-order-9 {
  order: 9;
}
.md-order-10 {
  order: 10;
}
.md-order-first {
  order: -9999;
}
.md-order-last {
  order: 9999;
}
.md-order-none {
  order: 0;
}
  
  .md-p-0{
    padding: 0;
  }
  .md-p-1 {
    padding: 4px;
  }

  .md-p-2 {
    padding: 8px;
  }

  .md-p-3 {
    padding: 12px;
  }

  .md-p-4 {
    padding: 16px;
  }

  .md-p-5 {
    padding: 20px;
  }

  .md-p-6 {
    padding: 24px;
  }

  .md-p-7 {
    padding: 28px;
  }

  .md-p-8 {
    padding: 32px;
  }

  .md-p-9 {
    padding: 36px;
  }

  .md-p-10 {
    padding: 40px;
  }

  .md-p-11 {
    padding: 44px;
  }

  .md-p-12 {
    padding: 48px;
  }

  .md-p-13 {
    padding: 52px;
  }

  .md-p-14 {
    padding: 56px;
  }

  .md-p-15 {
    padding: 60px;
  }

  .md-p-16 {
    padding: 64px;
  }

  .md-p-17 {
    padding: 68px;
  }

  .md-p-18 {
    padding: 72px;
  }

  .md-p-19 {
    padding: 76px;
  }

  .md-p-20 {
    padding: 80px;
  }

  .md-p-21 {
    padding: 84px;
  }

  .md-p-22 {
    padding: 88px;
  }

  .md-p-23 {
    padding: 92px;
  }

  .md-p-24 {
    padding: 96px;
  }

  .md-p-25 {
    padding: 100px;
  }

  .md-p-26 {
    padding: 104px;
  }

  .md-p-27 {
    padding: 108px;
  }

  .md-p-28 {
    padding: 112px;
  }

  .md-p-29 {
    padding: 116px;
  }

  .md-p-30 {
    padding: 120px;
  }

  /* Classes de padding com o nome "p-posicao-valor" */

  .md-pt-1 {
    padding-top: 4px;
  }

  .md-pt-2 {
    padding-top: 8px;
  }

  .md-pt-3 {
    padding-top: 12px;
  }

  .md-pt-4 {
    padding-top: 16px;
  }

  .md-pt-5 {
    padding-top: 20px;
  }

  .md-pt-6 {
    padding-top: 24px;
  }

  .md-pt-7 {
    padding-top: 28px;
  }

  .md-pt-8 {
    padding-top: 32px;
  }

  .md-pt-9 {
    padding-top: 36px;
  }

  .md-pt-10 {
    padding-top: 40px;
  }

  .md-pt-11 {
    padding-top: 44px;
  }

  .md-pt-12 {
    padding-top: 48px;
  }

  .md-pt-13 {
    padding-top: 52px;
  }

  .md-pt-14 {
    padding-top: 56px;
  }

  .md-pt-15 {
    padding-top: 60px;
  }

  .md-pt-16 {
    padding-top: 64px;
  }

  .md-pt-17 {
    padding-top: 68px;
  }

  .md-pt-18 {
    padding-top: 72px;
  }

  .md-pt-19 {
    padding-top: 76px;
  }

  .md-pt-20 {
    padding-top: 80px;
  }

  .md-pt-21 {
    padding-top: 84px;
  }

  .md-pt-22 {
    padding-top: 88px;
  }

  .md-pt-23 {
    padding-top: 92px;
  }

  .md-pt-24 {
    padding-top: 96px;
  }

  .md-pt-25 {
    padding-top: 100px;
  }

  .md-pt-26 {
    padding-top: 104;
  }

  .md-pt-27 {
    padding-top: 108px;
  }

  .md-pt-28 {
    padding-top: 112px;
  }

  .md-pt-29 {
    padding-top: 116px;
  }

  .md-pt-30 {
    padding-top: 120px;
  }

  .md-pr-1 {
    padding-right: 4px;
  }

  .md-pr-2 {
    padding-right: 8px;
  }

  .md-pr-3 {
    padding-right: 12px;
  }

  .md-pr-4 {
    padding-right: 16px;
  }

  .md-pr-5 {
    padding-right: 20px;
  }

  .md-pr-6 {
    padding-right: 24px;
  }

  .md-pr-7 {
    padding-right: 28px;
  }

  .md-pr-8 {
    padding-right: 32px;
  }

  .md-pr-9 {
    padding-right: 36px;
  }

  .md-pr-10 {
    padding-right: 40px;
  }

  .md-pr-11 {
    padding-right: 44px;
  }

  .md-pr-12 {
    padding-right: 48px;
  }

  .md-pr-13 {
    padding-right: 52px;
  }

  .md-pr-14 {
    padding-right: 56px;
  }

  .md-pr-15 {
    padding-right: 60px;
  }

  .md-pr-16 {
    padding-right: 64px;
  }

  .md-pr-17 {
    padding-right: 68px;
  }

  .md-pr-18 {
    padding-right: 72px;
  }

  .md-pr-19 {
    padding-right: 76px;
  }

  .md-pr-20 {
    padding-right: 80px;
  }

  .md-pr-21 {
    padding-right: 84px;
  }

  .md-pr-22 {
    padding-right: 88px;
  }

  .md-pr-23 {
    padding-right: 92px;
  }

  .md-pr-24 {
    padding-right: 96px;
  }

  .md-pr-25 {
    padding-right: 100px;
  }

  .md-pr-26 {
    padding-right: 104px;
  }

  .md-pr-27 {
    padding-right: 108px;
  }

  .md-pr-28 {
    padding-right: 112px;
  }

  .md-pr-29 {
    padding-right: 116px;
  }

  .md-pr-30 {
    padding-right: 120px;
  }

  .md-pb-1 {
    padding-bottom: 4px;
  }

  .md-pb-2 {
    padding-bottom: 8px;
  }

  .md-pb-3 {
    padding-bottom: 12px;
  }

  .md-pb-4 {
    padding-bottom: 16px;
  }

  .md-pb-5 {
    padding-bottom: 20px;
  }

  .md-pb-6 {
    padding-bottom: 24px;
  }

  .md-pb-7 {
    padding-bottom: 28px;
  }

  .md-pb-8 {
    padding-bottom: 32px;
  }

  .md-pb-9 {
    padding-bottom: 36px;
  }

  .md-pb-10 {
    padding-bottom: 40px;
  }

  .md-pb-11 {
    padding-bottom: 44px;
  }

  .md-pb-12 {
    padding-bottom: 48px;
  }

  .md-pb-13 {
    padding-bottom: 52px;
  }

  .md-pb-14 {
    padding-bottom: 56px;
  }

  .md-pb-15 {
    padding-bottom: 60px;
  }

  .md-pb-16 {
    padding-bottom: 64px;
  }

  .md-pb-17 {
    padding-bottom: 68px;
  }

  .md-pb-18 {
    padding-bottom: 72px;
  }

  .md-pb-19 {
    padding-bottom: 76px;
  }

  .md-pb-20 {
    padding-bottom: 80px;
  }

  .md-pb-21 {
    padding-bottom: 84px;
  }

  .md-pb-22 {
    padding-bottom: 88px;
  }

  .md-pb-23 {
    padding-bottom: 92px;
  }

  .md-pb-24 {
    padding-bottom: 96px;
  }

  .md-pb-25 {
    padding-bottom: 100px;
  }

  .md-pb-26 {
    padding-bottom: 104px;
  }

  .md-pb-27 {
    padding-bottom: 108px;
  }

  .md-pb-28 {
    padding-bottom: 112px;
  }

  .md-pb-29 {
    padding-bottom: 116px;
  }

  .md-pb-30 {
    padding-bottom: 120px;
  }

  .md-pl-1 {
    padding-left: 4px;
  }

  .md-pl-2 {
    padding-left: 8px;
  }

  .md-pl-3 {
    padding-left: 12px;
  }

  .md-pl-4 {
    padding-left: 16px;
  }

  .md-pl-5 {
    padding-left: 20px;
  }

  .md-pl-6 {
    padding-left: 24px;
  }

  .md-pl-7 {
    padding-left: 28px;
  }

  .md-pl-8 {
    padding-left: 32px;
  }

  .md-pl-9 {
    padding-left: 36px;
  }

  .md-pl-10 {
    padding-left: 40px;
  }

  .md-pl-11 {
    padding-left: 44px;
  }

  .md-pl-12 {
    padding-left: 48px;
  }

  .md-pl-13 {
    padding-left: 52px;
  }

  .md-pl-14 {
    padding-left: 56px;
  }

  .md-pl-15 {
    padding-left: 60px;
  }

  .md-pl-16 {
    padding-left: 64px;
  }

  .md-pl-17 {
    padding-left: 68px;
  }

  .md-pl-18 {
    padding-left: 72px;
  }

  .md-pl-19 {
    padding-left: 76px;
  }

  .md-pl-20 {
    padding-left: 80px;
  }

  .md-pl-21 {
    padding-left: 84px;
  }

  .md-pl-22 {
    padding-left: 88px;
  }

  .md-pl-23 {
    padding-left: 92px;
  }

  .md-pl-24 {
    padding-left: 96px;
  }

  .md-pl-25 {
    padding-left: 100px;
  }

  .md-pl-26 {
    padding-left: 104px;
  }

  .md-pl-27 {
    padding-left: 108px;
  }

  .md-pl-28 {
    padding-left: 112px;
  }

  .md-pl-29 {
    padding-left: 116px;
  }

  .md-pl-30 {
    padding-left: 120px;
  }

  /* Classes de padding vertical com o nome "py-valor" */
  .md-py-1 {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .md-py-2 {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .md-py-3 {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .md-py-4 {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .md-py-5 {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .md-py-6 {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .md-py-7 {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .md-py-8 {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .md-py-9 {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .md-py-10 {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .md-py-11 {
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .md-py-12 {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .md-py-13 {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  .md-py-14 {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .md-py-15 {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .md-py-16 {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .md-py-17 {
    padding-top: 68px;
    padding-bottom: 68px;
  }

  .md-py-18 {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .md-py-19 {
    padding-top: 76px;
    padding-bottom: 76px;
  }

  .md-py-20 {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .md-py-21 {
    padding-top: 84px;
    padding-bottom: 84px;
  }

  .md-py-22 {
    padding-top: 88px;
    padding-bottom: 88px;
  }

  .md-py-23 {
    padding-top: 92px;
    padding-bottom: 92px;
  }

  .md-py-24 {
    padding-top: 96px;
    padding-bottom: 96px;
  }

  .md-py-25 {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .md-py-26 {
    padding-top: 104px;
    padding-bottom: 104px;
  }

  .md-py-27 {
    padding-top: 108px;
    padding-bottom: 108px;
  }

  .md-py-28 {
    padding-top: 112px;
    padding-bottom: 112px;
  }

  .md-py-29 {
    padding-top: 116px;
    padding-bottom: 116px;
  }

  .md-py-30 {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  /* Classes de padding com o nome "px-valor" */
  .md-px-1 {
    padding-left: 4px;
    padding-right: 4px;
  }

  .md-px-2 {
    padding-left: 8px;
    padding-right: 8px;
  }

  .md-px-3 {
    padding-left: 12px;
    padding-right: 12px;
  }

  .md-px-4 {
    padding-left: 16px;
    padding-right: 16px;
  }

  .md-px-5 {
    padding-left: 20px;
    padding-right: 20px;
  }

  .md-px-6 {
    padding-left: 24px;
    padding-right: 24px;
  }

  .md-px-7 {
    padding-left: 28px;
    padding-right: 28px;
  }

  .md-px-8 {
    padding-left: 32px;
    padding-right: 32px;
  }

  .md-px-9 {
    padding-left: 36px;
    padding-right: 36px;
  }

  .md-px-10 {
    padding-left: 40px;
    padding-right: 40px;
  }

  .md-px-11 {
    padding-left: 44px;
    padding-right: 44px;
  }

  .md-px-12 {
    padding-left: 48px;
    padding-right: 48px;
  }

  .md-px-13 {
    padding-left: 52px;
    padding-right: 52px;
  }

  .md-px-14 {
    padding-left: 56px;
    padding-right: 56px;
  }

  .md-px-15 {
    padding-left: 60px;
    padding-right: 60px;
  }

  .md-px-16 {
    padding-left: 64px;
    padding-right: 64px;
  }

  .md-px-17 {
    padding-left: 68px;
    padding-right: 68px;
  }

  .md-px-18 {
    padding-left: 72px;
    padding-right: 72px;
  }

  .md-px-19 {
    padding-left: 76px;
    padding-right: 76px;
  }

  .md-px-20 {
    padding-left: 80px;
    padding-right: 80px;
  }

  .md-px-21 {
    padding-left: 84px;
    padding-right: 84px;
  }

  .md-px-22 {
    padding-left: 88px;
    padding-right: 88px;
  }

  .md-px-23 {
    padding-left: 92px;
    padding-right: 92px;
  }

  .md-px-24 {
    padding-left: 96px;
    padding-right: 96px;
  }

  .md-px-25 {
    padding-left: 100px;
    padding-right: 100px;
  }

  .md-px-26 {
    padding-left: 104px;
    padding-right: 104px;
  }

  .md-px-27 {
    padding-left: 108px;
    padding-right: 108px;
  }

  .md-px-28 {
    padding-left: 112px;
    padding-right: 112px;
  }

  .md-px-29 {
    padding-left: 116px;
    padding-right: 116px;
  }

  .md-px-30 {
    padding-left: 120px;
    padding-right: 120px;
  }

  /* PADDING PORCENTAGEM */

  .md-p-1P {
    padding: 4%;
  }

  .md-p-2P {
    padding: 8%;
  }

  .md-p-3P {
    padding: 12%;
  }

  /* Classes de margin com o nome "p-valor" */
  .md-m-1 {
    margin: 4px;
  }

  .md-m-2 {
    margin: 8px;
  }

  .md-m-3 {
    margin: 12px;
  }

  .md-m-4 {
    margin: 16px;
  }

  .md-m-5 {
    margin: 20px;
  }

  .md-m-6 {
    margin: 24px;
  }

  .md-m-7 {
    margin: 28px;
  }

  .md-m-8 {
    margin: 32px;
  }

  .md-m-9 {
    margin: 36px;
  }

  .md-m-10 {
    margin: 40px;
  }

  .md-m-11 {
    margin: 44px;
  }

  .md-m-12 {
    margin: 48px;
  }

  .md-m-13 {
    margin: 52px;
  }

  .md-m-14 {
    margin: 56px;
  }

  .md-m-15 {
    margin: 60px;
  }

  .md-m-16 {
    margin: 64px;
  }

  .md-m-17 {
    margin: 68px;
  }

  .md-m-18 {
    margin: 72px;
  }

  .md-m-19 {
    margin: 76px;
  }

  .md-m-20 {
    margin: 80px;
  }

  .md-m-21 {
    margin: 84px;
  }

  .md-m-22 {
    margin: 88px;
  }

  .md-m-23 {
    margin: 92px;
  }

  .md-m-24 {
    margin: 96px;
  }

  .md-m-25 {
    margin: 100px;
  }

  .md-m-26 {
    margin: 104px;
  }

  .md-m-27 {
    margin: 108px;
  }

  .md-m-28 {
    margin: 112px;
  }

  .md-m-29 {
    margin: 116px;
  }

  .md-m-30 {
    margin: 120px;
  }

  /* Classes de margin com o nome "p-posicao-valor" */

  .md-mt-1 {
    margin-top: 4px;
  }

  .md-mt-2 {
    margin-top: 8px;
  }

  .md-mt-3 {
    margin-top: 12px;
  }

  .md-mt-4 {
    margin-top: 16px;
  }

  .md-mt-5 {
    margin-top: 20px;
  }

  .md-mt-6 {
    margin-top: 24px;
  }

  .md-mt-7 {
    margin-top: 28px;
  }

  .md-mt-8 {
    margin-top: 32px;
  }

  .md-mt-9 {
    margin-top: 36px;
  }

  .md-mt-10 {
    margin-top: 40px;
  }

  .md-mt-11 {
    margin-top: 44px;
  }

  .md-mt-12 {
    margin-top: 48px;
  }

  .md-mt-13 {
    margin-top: 52px;
  }

  .md-mt-14 {
    margin-top: 56px;
  }

  .md-mt-15 {
    margin-top: 60px;
  }

  .md-mt-16 {
    margin-top: 64px;
  }

  .md-mt-17 {
    margin-top: 68px;
  }

  .md-mt-18 {
    margin-top: 72px;
  }

  .md-mt-19 {
    margin-top: 76px;
  }

  .md-mt-20 {
    margin-top: 80px;
  }

  .md-mt-21 {
    margin-top: 84px;
  }

  .md-mt-22 {
    margin-top: 88px;
  }

  .md-mt-23 {
    margin-top: 92px;
  }

  .md-mt-24 {
    margin-top: 96px;
  }

  .md-mt-25 {
    margin-top: 100px;
  }

  .md-mt-26 {
    margin-top: 104;
  }

  .md-mt-27 {
    margin-top: 108px;
  }

  .md-mt-28 {
    margin-top: 112px;
  }

  .md-mt-29 {
    margin-top: 116px;
  }

  .md-mt-30 {
    margin-top: 120px;
  }

  .md-mr-1 {
    margin-right: 4px;
  }

  .md-mr-2 {
    margin-right: 8px;
  }

  .md-mr-3 {
    margin-right: 12px;
  }

  .md-mr-4 {
    margin-right: 16px;
  }

  .md-mr-5 {
    margin-right: 20px;
  }

  .md-mr-6 {
    margin-right: 24px;
  }

  .md-mr-7 {
    margin-right: 28px;
  }

  .md-mr-8 {
    margin-right: 32px;
  }

  .md-mr-9 {
    margin-right: 36px;
  }

  .md-mr-10 {
    margin-right: 40px;
  }

  .md-mr-11 {
    margin-right: 44px;
  }

  .md-mr-12 {
    margin-right: 48px;
  }

  .md-mr-13 {
    margin-right: 52px;
  }

  .md-mr-14 {
    margin-right: 56px;
  }

  .md-mr-15 {
    margin-right: 60px;
  }

  .md-mr-16 {
    margin-right: 64px;
  }

  .md-mr-17 {
    margin-right: 68px;
  }

  .md-mr-18 {
    margin-right: 72px;
  }

  .md-mr-19 {
    margin-right: 76px;
  }

  .md-mr-20 {
    margin-right: 80px;
  }

  .md-mr-21 {
    margin-right: 84px;
  }

  .md-mr-22 {
    margin-right: 88px;
  }

  .md-mr-23 {
    margin-right: 92px;
  }

  .md-mr-24 {
    margin-right: 96px;
  }

  .md-mr-25 {
    margin-right: 100px;
  }

  .md-mr-26 {
    margin-right: 104px;
  }

  .md-mr-27 {
    margin-right: 108px;
  }

  .md-mr-28 {
    margin-right: 112px;
  }

  .md-mr-29 {
    margin-right: 116px;
  }

  .md-mr-30 {
    margin-right: 120px;
  }

  .md-mb-1 {
    margin-bottom: 4px;
  }

  .md-mb-2 {
    margin-bottom: 8px;
  }

  .md-mb-3 {
    margin-bottom: 12px;
  }

  .md-mb-4 {
    margin-bottom: 16px;
  }

  .md-mb-5 {
    margin-bottom: 20px;
  }

  .md-mb-6 {
    margin-bottom: 24px;
  }

  .md-mb-7 {
    margin-bottom: 28px;
  }

  .md-mb-8 {
    margin-bottom: 32px;
  }

  .md-mb-9 {
    margin-bottom: 36px;
  }

  .md-mb-10 {
    margin-bottom: 40px;
  }

  .md-mb-11 {
    margin-bottom: 44px;
  }

  .md-mb-12 {
    margin-bottom: 48px;
  }

  .md-mb-13 {
    margin-bottom: 52px;
  }

  .md-mb-14 {
    margin-bottom: 56px;
  }

  .md-mb-15 {
    margin-bottom: 60px;
  }

  .md-mb-16 {
    margin-bottom: 64px;
  }

  .md-mb-17 {
    margin-bottom: 68px;
  }

  .md-mb-18 {
    margin-bottom: 72px;
  }

  .md-mb-19 {
    margin-bottom: 76px;
  }

  .md-mb-20 {
    margin-bottom: 80px;
  }

  .md-mb-21 {
    margin-bottom: 84px;
  }

  .md-mb-22 {
    margin-bottom: 88px;
  }

  .md-mb-23 {
    margin-bottom: 92px;
  }

  .md-mb-24 {
    margin-bottom: 96px;
  }

  .md-mb-25 {
    margin-bottom: 100px;
  }

  .md-mb-26 {
    margin-bottom: 104px;
  }

  .md-mb-27 {
    margin-bottom: 108px;
  }

  .md-mb-28 {
    margin-bottom: 112px;
  }

  .md-mb-29 {
    margin-bottom: 116px;
  }

  .md-mb-30 {
    margin-bottom: 120px;
  }

  .md-ml-1 {
    margin-left: 4px;
  }

  .md-ml-2 {
    margin-left: 8px;
  }

  .md-ml-3 {
    margin-left: 12px;
  }

  .md-ml-4 {
    margin-left: 16px;
  }

  .md-ml-5 {
    margin-left: 20px;
  }

  .md-ml-6 {
    margin-left: 24px;
  }

  .md-ml-7 {
    margin-left: 28px;
  }

  .md-ml-8 {
    margin-left: 32px;
  }

  .md-ml-9 {
    margin-left: 36px;
  }

  .md-ml-10 {
    margin-left: 40px;
  }

  .md-ml-11 {
    margin-left: 44px;
  }

  .md-ml-12 {
    margin-left: 48px;
  }

  .md-ml-13 {
    margin-left: 52px;
  }

  .md-ml-14 {
    margin-left: 56px;
  }

  .md-ml-15 {
    margin-left: 60px;
  }

  .md-ml-16 {
    margin-left: 64px;
  }

  .md-ml-17 {
    margin-left: 68px;
  }

  .md-ml-18 {
    margin-left: 72px;
  }

  .md-ml-19 {
    margin-left: 76px;
  }

  .md-ml-20 {
    margin-left: 80px;
  }

  .md-ml-21 {
    margin-left: 84px;
  }

  .md-ml-22 {
    margin-left: 88px;
  }

  .md-ml-23 {
    margin-left: 92px;
  }

  .md-ml-24 {
    margin-left: 96px;
  }

  .md-ml-25 {
    margin-left: 100px;
  }

  .md-ml-26 {
    margin-left: 104px;
  }

  .md-ml-27 {
    margin-left: 108px;
  }

  .md-ml-28 {
    margin-left: 112px;
  }

  .md-ml-29 {
    margin-left: 116px;
  }

  .md-ml-30 {
    margin-left: 120px;
  }

  /* Classes de margin vertical com o nome "py-valor" */
  .md-my-1 {
    margin-top: 4px;
    margin-bottom: 4px;
  }

  .md-my-2 {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .md-my-3 {
    margin-top: 12px;
    margin-bottom: 12px;
  }

  .md-my-4 {
    margin-top: 16px;
    margin-bottom: 16px;
  }

  .md-my-5 {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .md-my-6 {
    margin-top: 24px;
    margin-bottom: 24px;
  }

  .md-my-7 {
    margin-top: 28px;
    margin-bottom: 28px;
  }

  .md-my-8 {
    margin-top: 32px;
    margin-bottom: 32px;
  }

  .md-my-9 {
    margin-top: 36px;
    margin-bottom: 36px;
  }

  .md-my-10 {
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .md-my-11 {
    margin-top: 44px;
    margin-bottom: 44px;
  }

  .md-my-12 {
    margin-top: 48px;
    margin-bottom: 48px;
  }

  .md-my-13 {
    margin-top: 52px;
    margin-bottom: 52px;
  }

  .md-my-14 {
    margin-top: 56px;
    margin-bottom: 56px;
  }

  .md-my-15 {
    margin-top: 60px;
    margin-bottom: 60px;
  }

  .md-my-16 {
    margin-top: 64px;
    margin-bottom: 64px;
  }

  .md-my-17 {
    margin-top: 68px;
    margin-bottom: 68px;
  }

  .md-my-18 {
    margin-top: 72px;
    margin-bottom: 72px;
  }

  .md-my-19 {
    margin-top: 76px;
    margin-bottom: 76px;
  }

  .md-my-20 {
    margin-top: 80px;
    margin-bottom: 80px;
  }

  .md-my-21 {
    margin-top: 84px;
    margin-bottom: 84px;
  }

  .md-my-22 {
    margin-top: 88px;
    margin-bottom: 88px;
  }

  .md-my-23 {
    margin-top: 92px;
    margin-bottom: 92px;
  }

  .md-my-24 {
    margin-top: 96px;
    margin-bottom: 96px;
  }

  .md-my-25 {
    margin-top: 100px;
    margin-bottom: 100px;
  }

  .md-my-26 {
    margin-top: 104px;
    margin-bottom: 104px;
  }

  .md-my-27 {
    margin-top: 108px;
    margin-bottom: 108px;
  }

  .md-my-28 {
    margin-top: 112px;
    margin-bottom: 112px;
  }

  .md-my-29 {
    margin-top: 116px;
    margin-bottom: 116px;
  }

  .md-my-30 {
    margin-top: 120px;
    margin-bottom: 120px;
  }

  /* Classes de margin com o nome "px-valor" */
  .md-px-1 {
    margin-left: 4px;
    margin-right: 4px;
  }

  .md-mx-2 {
    margin-left: 8px;
    margin-right: 8px;
  }

  .md-mx-3 {
    margin-left: 12px;
    margin-right: 12px;
  }

  .md-mx-4 {
    margin-left: 16px;
    margin-right: 16px;
  }

  .md-mx-5 {
    margin-left: 20px;
    margin-right: 20px;
  }

  .md-mx-6 {
    margin-left: 24px;
    margin-right: 24px;
  }

  .md-mx-7 {
    margin-left: 28px;
    margin-right: 28px;
  }

  .md-mx-8 {
    margin-left: 32px;
    margin-right: 32px;
  }

  .md-mx-9 {
    margin-left: 36px;
    margin-right: 36px;
  }

  .md-mx-10 {
    margin-left: 40px;
    margin-right: 40px;
  }

  .md-mx-11 {
    margin-left: 44px;
    margin-right: 44px;
  }

  .md-mx-12 {
    margin-left: 48px;
    margin-right: 48px;
  }

  .md-mx-13 {
    margin-left: 52px;
    margin-right: 52px;
  }

  .md-mx-14 {
    margin-left: 56px;
    margin-right: 56px;
  }

  .md-mx-15 {
    margin-left: 60px;
    margin-right: 60px;
  }

  .md-mx-16 {
    margin-left: 64px;
    margin-right: 64px;
  }

  .md-mx-17 {
    margin-left: 68px;
    margin-right: 68px;
  }

  .md-mx-18 {
    margin-left: 72px;
    margin-right: 72px;
  }

  .md-mx-19 {
    margin-left: 76px;
    margin-right: 76px;
  }

  .md-mx-20 {
    margin-left: 80px;
    margin-right: 80px;
  }

  .md-mx-21 {
    margin-left: 84px;
    margin-right: 84px;
  }

  .md-mx-22 {
    margin-left: 88px;
    margin-right: 88px;
  }

  .md-mx-23 {
    margin-left: 92px;
    margin-right: 92px;
  }

  .md-mx-24 {
    margin-left: 96px;
    margin-right: 96px;
  }

  .md-mx-25 {
    margin-left: 100px;
    margin-right: 100px;
  }

  .md-mx-26 {
    margin-left: 104px;
    margin-right: 104px;
  }

  .md-mx-27 {
    margin-left: 108px;
    margin-right: 108px;
  }

  .md-mx-28 {
    margin-left: 112px;
    margin-right: 112px;
  }

  .md-mx-29 {
    margin-left: 116px;
    margin-right: 116px;
  }

  .md-mx-30 {
    margin-left: 120px;
    margin-right: 120px;
  }

  /* Margin Porcentagem */
  .md-m-1P {
    margin: 4%;
  }

  .md-m-2P {
    margin: 8%;
  }

  .md-m-3P {
    margin: 12%;
  }
  /* Border radius */
  .md-rounded-1 {
    border-radius: 4px;
  }

  .md-rounded-2 {
    border-radius: 8px;
  }

  .md-rounded-3 {
    border-radius: 12px;
  }

  .md-rounded-4 {
    border-radius: 16px;
  }

  .md-rounded-5 {
    border-radius: 20px;
  }

  .md-rounded-6 {
    border-radius: 24px;
  }

  .md-rounded-full {
    border-radius: 50%;
  }
  .md-rounded-50 {
    border-radius: 50px;
  }

  /* Shadow */
  .md-shadow-sm {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }

  .md-shadow-md {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .md-shadow-lg {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  }
  .md-flex {
    display: flex;
  }

  /* Flex direction */
  .md-flex-row {
    flex-direction: row;
  }

  .md-flex-col {
    flex-direction: column;
  }

  /* Flex wrap */
  .md-flex-wrap {
    flex-wrap: wrap;
  }

  /* Justify content */
  .md-justify-start {
    justify-content: flex-start;
  }

  .md-justify-end {
    justify-content: flex-end;
  }

  .md-justify-center {
    justify-content: center;
  }

  .md-justify-between {
    justify-content: space-between;
  }

  .md-justify-around {
    justify-content: space-around;
  }

  /* Align items */
  .md-items-start {
    align-items: flex-start;
  }

  .md-items-end {
    align-items: flex-end;
  }

  .md-items-center {
    align-items: center;
  }

  .md-items-baseline {
    align-items: baseline;
  }

  .md-items-stretch {
    align-items: stretch;
  }

  /* Align content */
  .md-content-start {
    align-content: flex-start;
  }

  .md-content-end {
    align-content: flex-end;
  }

  .md-content-center {
    align-content: center;
  }

  .md-content-between {
    align-content: space-between;
  }

  .md-content-around {
    align-content: space-around;
  }

  .md-content-stretch {
    align-content: stretch;
  }

  /* Flex item */
  .md-flex-1 {
    flex: 1;
  }

  .md-flex-auto {
    flex: auto;
  }

  .md-flex-initial {
    flex: initial;
  }

  .md-flex-none {
    flex: none;
  }

  /* Align self */
  .md-self-auto {
    align-self: auto;
  }

  .md-self-start {
    align-self: flex-start;
  }

  .md-self-end {
    align-self: flex-end;
  }

  .md-self-center {
    align-self: center;
  }

  .md-self-stretch {
    align-self: stretch;
  }
  .md-gap-1 {
    gap: 4px;
  }

  .md-gap-2 {
    gap: 8px;
  }

  .md-gap-3 {
    gap: 16px;
  }

  .md-gap-4 {
    gap: 24px;
  }

  .md-gap-5 {
    gap: 32px;
  }
  .md-gap-6 {
    gap: 40px;
  }
  .md-gap-7 {
    gap: 48px;
  }
  .md-gap-8 {
    gap: 56px;
  }
  .md-gap-9 {
    gap: 64px;
  }
  .md-gap-10 {
    gap: 72px;
  }
  .md-gap-11 {
    gap: 80px;
  }
  .md-gap-12 {
    gap: 88px;
  }
  .md-gap-13 {
    gap: 96px;
  }
  .md-gap-14 {
    gap: 104px;
  }
  .md-gap-15 {
    gap: 112px;
  }
  .md-w-1 {
    width: 10%;
  }
  .md-w-2 {
    width: 20%;
  }
  .md-w-3 {
    width: 30%;
  }
  .md-w-4 {
    width: 40%;
  }
  .md-w-5 {
    width: 50%;
  }
  .md-w-6 {
    width: 60%;
  }
  .md-w-7 {
    width: 70%;
  }
  .md-w-8 {
    width: 80%;
  }
  .md-w-9 {
    width: 90%;
  }
  .md-w-full {
    width: 100%;
  }
  .md-w-auto {
    width: auto;
  }
  .md-w-fit-content {
    width: fit-content;
  }
  .md-h-1 {
    height: 12px;
  }
  .md-h-2 {
    height: 24px;
  }
  .md-h-3 {
    height: 36px;
  }
  .md-h-4 {
    height: 48px;
  }
  .md-h-5 {
    height: 60px;
  }
  .md-h-6 {
    height: 72px;
  }
  .md-h-7 {
    height: 84px;
  }
  .md-h-8 {
    height: 96px;
  }
  .md-h-9 {
    height: 108px;
  }
  .md-h-full {
    height: 100%;
  }
  .md-h-screen {
    height: 100vh;
  }
  .md-h-fit-content {
    height: fit-content;
  }

  /* Classes para posição */
  .md-relative {
    position: relative;
  }
  .md-absolute {
    position: absolute;
  }
  .md-fixed {
    position: fixed;
  }
  .md-static {
    position: static;
  }
  .md-sticky {
    position: sticky;
  }
  /* Classes para posição */
  .md-top-0 {
    top: 0;
  }
  .md-right-0 {
    right: 0;
  }
  .md-bottom-0 {
    bottom: 0;
  }
  .md-left-0 {
    left: 0;
  }

  /* Classes para overflow */
  .md-overflow-auto {
    overflow: auto;
  }
  .md-overflow-hidden {
    overflow: hidden;
  }
  .md-overflow-visible {
    overflow: visible;
  }
  .md-overflow-scroll {
    overflow: scroll;
  }
  .md-overflow-x-auto {
    overflow-x: auto;
  }
  .md-overflow-x-hidden {
    overflow-x: hidden;
  }
  .md-overflow-x-visible {
    overflow-x: visible;
  }
  .md-overflow-x-scroll {
    overflow-x: scroll;
  }
  .md-overflow-y-auto {
    overflow-y: auto;
  }
  .md-overflow-y-hidden {
    overflow-y: hidden;
  }
  .md-overflow-y-visible {
    overflow-y: visible;
  }
  .md-overflow-y-scroll {
    overflow-y: scroll;
  }
  .md-text-xs {
    font-size: 0.75rem;
  }
  .md-text-sm {
    font-size: 0.875rem;
  }
  .md-text-base {
    font-size: 1rem;
  }
  .md-text-lg {
    font-size: 1.125rem;
  }
  .md-text-xl {
    font-size: 1.25rem;
  }
  .md-text-2xl {
    font-size: 1.5rem;
  }
  .md-text-3xl {
    font-size: 1.875rem;
  }
  .md-text-4xl {
    font-size: 2.5rem;
  }
  .md-text-5xl {
    font-size: 3rem;
  }
  .md-text-6xl {
    font-size: 4rem;
  }
  .md-text-7xl {
    font-size: 5rem;
  }
  .md-text-8xl {
    font-size: 6rem;
  }
  .md-text-9xl {
    font-size: 6.5rem;
  }
  .md-font-thin {
    font-weight: 100;
  }
  .md-font-extralight {
    font-weight: 200;
  }
  .md-font-light {
    font-weight: 300;
  }
  .md-font-normal {
    font-weight: 400;
  }
  .md-font-medium {
    font-weight: 500;
  }
  .md-font-semibold {
    font-weight: 600;
  }
  .md-font-bold {
    font-weight: 700;
  }
  .md-font-extrabold {
    font-weight: 800;
  }
  .md-font-black {
    font-weight: 900;
  }
  .md-opacity-0 {
    opacity: 0;
  }

  .md-opacity-25 {
    opacity: 0.25;
  }

  .md-opacity-50 {
    opacity: 0.5;
  }

  .md-opacity-75 {
    opacity: 0.75;
  }

  .md-opacity-100 {
    opacity: 1;
  }

  .md-leading-none {
    line-height: 1;
  }

  .md-leading-tight {
    line-height: 1.25;
  }

  .md-leading-normal {
    line-height: 1.5;
  }

  .md-leading-relaxed {
    line-height: 1.625;
  }

  .md-leading-loose {
    line-height: 2;
  }

  .md-block {
    display: block;
  }

  .md-inline-block {
    display: inline-block;
  }

  .md-inline {
    display: inline;
  }

  .md-inline-flex {
    display: inline-flex;
  }

  .md-inline-grid {
    display: inline-grid;
  }

  .md-table {
    display: table;
  }

  .md-table-caption {
    display: table-caption;
  }

  .md-table-cell {
    display: table-cell;
  }

  .md-table-column {
    display: table-column;
  }

  .md-table-column-group {
    display: table-column-group;
  }

  .md-table-footer-group {
    display: table-footer-group;
  }

  .md-table-header-group {
    display: table-header-group;
  }

  .md-table-row {
    display: table-row;
  }

  .md-table-row-group {
    display: table-row-group;
  }

  .md-hidden {
    display: none !important;
  }
    /* Text Align - Medium Screen */
  .md-text-left {
    text-align: left !important;
  }

  .md-text-center {
    text-align: center !important;
  }

  .md-text-right {
    text-align: right !important;
  }

  .md-text-justify {
    text-align: justify !important;
  }
  .md-aspect-ratio-custom{
    aspect-ratio: var(--aspect-ratio-custom);
  }
}
/* sm */
@media screen and (max-width: 640px) {
  .sm-grid {
    display: grid;
  }
  .sm-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  
  .sm-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .sm-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  
  .sm-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  
  .sm-grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  
  .sm-grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  
  .sm-grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  
  .sm-grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  
  .sm-grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  
  .sm-grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  
  .sm-grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  
  .sm-grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  
  .sm-grid-cols-none {
    grid-template-columns: none;
  }
  
  /* Grid items */
  .sm-item {
    grid-column: auto;
    grid-row: auto;
  }
  
  .sm-grid-item-1 {
    grid-column: span 1 / span 1;
    width: 100%;
  }
  .sm-grid-item-2 {
    grid-column: span 2 / span 2;
    width: 100%;
  }
  .sm-grid-item-3 {
    grid-column: span 3 / span 3;
    width: 100%;
  }
  .sm-grid-item-4 {
    grid-column: span 4 / span 4;
    width: 100%;
  }
  .sm-grid-item-5 {
    grid-column: span 5 / span 5;
    width: 100%;
  }
  .sm-grid-item-6 {
    grid-column: span 6 / span 6;
    width: 100%;
  }
  .sm-grid-item-7 {
    grid-column: span 7 / span 7;
    width: 100%;
  }
  .sm-grid-item-8 {
    grid-column: span 8 / span 8;
    width: 100%;
  }
  .sm-grid-item-9 {
    grid-column: span 9 / span 9;
    width: 100%;
  }
  .sm-grid-item-10 {
    grid-column: span 10 / span 10;
    width: 100%;
  }
  .sm-grid-item-11 {
    grid-column: span 11 / span 11;
    width: 100%;
  }
  .sm-grid-item-12 {
    grid-column: span 12 / span 12;
    width: 100%;
  }
  /* Ordem */
.sm-order-1 {
  order: 1;
}
.sm-order-2 {
  order: 2;
}
.sm-order-3 {
  order: 3;
}
.sm-order-4 {
  order: 4;
}
.sm-order-5 {
  order: 5;
}
.sm-order-6 {
  order: 6;
}
.sm-order-7 {
  order: 7;
}
.sm-order-8 {
  order: 8;
}
.sm-order-9 {
  order: 9;
}
.sm-order-10 {
  order: 10;
}
.sm-order-first {
  order: -9999;
}
.sm-order-last {
  order: 9999;
}
.sm-order-none {
  order: 0;
}
  .sm-p-0{
    padding: 0;
  }
  .sm-p-1 {
    padding: 4px;
  }

  .sm-p-2 {
    padding: 8px;
  }

  .sm-p-3 {
    padding: 12px;
  }

  .sm-p-4 {
    padding: 16px;
  }

  .sm-p-5 {
    padding: 20px;
  }

  .sm-p-6 {
    padding: 24px;
  }

  .sm-p-7 {
    padding: 28px;
  }

  .sm-p-8 {
    padding: 32px;
  }

  .sm-p-9 {
    padding: 36px;
  }

  .sm-p-10 {
    padding: 40px;
  }

  .sm-p-11 {
    padding: 44px;
  }

  .sm-p-12 {
    padding: 48px;
  }

  .sm-p-13 {
    padding: 52px;
  }

  .sm-p-14 {
    padding: 56px;
  }

  .sm-p-15 {
    padding: 60px;
  }

  .sm-p-16 {
    padding: 64px;
  }

  .sm-p-17 {
    padding: 68px;
  }

  .sm-p-18 {
    padding: 72px;
  }

  .sm-p-19 {
    padding: 76px;
  }

  .sm-p-20 {
    padding: 80px;
  }

  .sm-p-21 {
    padding: 84px;
  }

  .sm-p-22 {
    padding: 88px;
  }

  .sm-p-23 {
    padding: 92px;
  }

  .sm-p-24 {
    padding: 96px;
  }

  .sm-p-25 {
    padding: 100px;
  }

  .sm-p-26 {
    padding: 104px;
  }

  .sm-p-27 {
    padding: 108px;
  }

  .sm-p-28 {
    padding: 112px;
  }

  .sm-p-29 {
    padding: 116px;
  }

  .sm-p-30 {
    padding: 120px;
  }

  /* Classes de padding com o nome "p-posicao-valor" */

  .sm-pt-1 {
    padding-top: 4px;
  }

  .sm-pt-2 {
    padding-top: 8px;
  }

  .sm-pt-3 {
    padding-top: 12px;
  }

  .sm-pt-4 {
    padding-top: 16px;
  }

  .sm-pt-5 {
    padding-top: 20px;
  }

  .sm-pt-6 {
    padding-top: 24px;
  }

  .sm-pt-7 {
    padding-top: 28px;
  }

  .sm-pt-8 {
    padding-top: 32px;
  }

  .sm-pt-9 {
    padding-top: 36px;
  }

  .sm-pt-10 {
    padding-top: 40px;
  }

  .sm-pt-11 {
    padding-top: 44px;
  }

  .sm-pt-12 {
    padding-top: 48px;
  }

  .sm-pt-13 {
    padding-top: 52px;
  }

  .sm-pt-14 {
    padding-top: 56px;
  }

  .sm-pt-15 {
    padding-top: 60px;
  }

  .sm-pt-16 {
    padding-top: 64px;
  }

  .sm-pt-17 {
    padding-top: 68px;
  }

  .sm-pt-18 {
    padding-top: 72px;
  }

  .sm-pt-19 {
    padding-top: 76px;
  }

  .sm-pt-20 {
    padding-top: 80px;
  }

  .sm-pt-21 {
    padding-top: 84px;
  }

  .sm-pt-22 {
    padding-top: 88px;
  }

  .sm-pt-23 {
    padding-top: 92px;
  }

  .sm-pt-24 {
    padding-top: 96px;
  }

  .sm-pt-25 {
    padding-top: 100px;
  }

  .sm-pt-26 {
    padding-top: 104;
  }

  .sm-pt-27 {
    padding-top: 108px;
  }

  .sm-pt-28 {
    padding-top: 112px;
  }

  .sm-pt-29 {
    padding-top: 116px;
  }

  .sm-pt-30 {
    padding-top: 120px;
  }

  .sm-pr-1 {
    padding-right: 4px;
  }

  .sm-pr-2 {
    padding-right: 8px;
  }

  .sm-pr-3 {
    padding-right: 12px;
  }

  .sm-pr-4 {
    padding-right: 16px;
  }

  .sm-pr-5 {
    padding-right: 20px;
  }

  .sm-pr-6 {
    padding-right: 24px;
  }

  .sm-pr-7 {
    padding-right: 28px;
  }

  .sm-pr-8 {
    padding-right: 32px;
  }

  .sm-pr-9 {
    padding-right: 36px;
  }

  .sm-pr-10 {
    padding-right: 40px;
  }

  .sm-pr-11 {
    padding-right: 44px;
  }

  .sm-pr-12 {
    padding-right: 48px;
  }

  .sm-pr-13 {
    padding-right: 52px;
  }

  .sm-pr-14 {
    padding-right: 56px;
  }

  .sm-pr-15 {
    padding-right: 60px;
  }

  .sm-pr-16 {
    padding-right: 64px;
  }

  .sm-pr-17 {
    padding-right: 68px;
  }

  .sm-pr-18 {
    padding-right: 72px;
  }

  .sm-pr-19 {
    padding-right: 76px;
  }

  .sm-pr-20 {
    padding-right: 80px;
  }

  .sm-pr-21 {
    padding-right: 84px;
  }

  .sm-pr-22 {
    padding-right: 88px;
  }

  .sm-pr-23 {
    padding-right: 92px;
  }

  .sm-pr-24 {
    padding-right: 96px;
  }

  .sm-pr-25 {
    padding-right: 100px;
  }

  .sm-pr-26 {
    padding-right: 104px;
  }

  .sm-pr-27 {
    padding-right: 108px;
  }

  .sm-pr-28 {
    padding-right: 112px;
  }

  .sm-pr-29 {
    padding-right: 116px;
  }

  .sm-pr-30 {
    padding-right: 120px;
  }

  .sm-pb-1 {
    padding-bottom: 4px;
  }

  .sm-pb-2 {
    padding-bottom: 8px;
  }

  .sm-pb-3 {
    padding-bottom: 12px;
  }

  .sm-pb-4 {
    padding-bottom: 16px;
  }

  .sm-pb-5 {
    padding-bottom: 20px;
  }

  .sm-pb-6 {
    padding-bottom: 24px;
  }

  .sm-pb-7 {
    padding-bottom: 28px;
  }

  .sm-pb-8 {
    padding-bottom: 32px;
  }

  .sm-pb-9 {
    padding-bottom: 36px;
  }

  .sm-pb-10 {
    padding-bottom: 40px;
  }

  .sm-pb-11 {
    padding-bottom: 44px;
  }

  .sm-pb-12 {
    padding-bottom: 48px;
  }

  .sm-pb-13 {
    padding-bottom: 52px;
  }

  .sm-pb-14 {
    padding-bottom: 56px;
  }

  .sm-pb-15 {
    padding-bottom: 60px;
  }

  .sm-pb-16 {
    padding-bottom: 64px;
  }

  .sm-pb-17 {
    padding-bottom: 68px;
  }

  .sm-pb-18 {
    padding-bottom: 72px;
  }

  .sm-pb-19 {
    padding-bottom: 76px;
  }

  .sm-pb-20 {
    padding-bottom: 80px;
  }

  .sm-pb-21 {
    padding-bottom: 84px;
  }

  .sm-pb-22 {
    padding-bottom: 88px;
  }

  .sm-pb-23 {
    padding-bottom: 92px;
  }

  .sm-pb-24 {
    padding-bottom: 96px;
  }

  .sm-pb-25 {
    padding-bottom: 100px;
  }

  .sm-pb-26 {
    padding-bottom: 104px;
  }

  .sm-pb-27 {
    padding-bottom: 108px;
  }

  .sm-pb-28 {
    padding-bottom: 112px;
  }

  .sm-pb-29 {
    padding-bottom: 116px;
  }

  .sm-pb-30 {
    padding-bottom: 120px;
  }

  .sm-pl-1 {
    padding-left: 4px;
  }

  .sm-pl-2 {
    padding-left: 8px;
  }

  .sm-pl-3 {
    padding-left: 12px;
  }

  .sm-pl-4 {
    padding-left: 16px;
  }

  .sm-pl-5 {
    padding-left: 20px;
  }

  .sm-pl-6 {
    padding-left: 24px;
  }

  .sm-pl-7 {
    padding-left: 28px;
  }

  .sm-pl-8 {
    padding-left: 32px;
  }

  .sm-pl-9 {
    padding-left: 36px;
  }

  .sm-pl-10 {
    padding-left: 40px;
  }

  .sm-pl-11 {
    padding-left: 44px;
  }

  .sm-pl-12 {
    padding-left: 48px;
  }

  .sm-pl-13 {
    padding-left: 52px;
  }

  .sm-pl-14 {
    padding-left: 56px;
  }

  .sm-pl-15 {
    padding-left: 60px;
  }

  .sm-pl-16 {
    padding-left: 64px;
  }

  .sm-pl-17 {
    padding-left: 68px;
  }

  .sm-pl-18 {
    padding-left: 72px;
  }

  .sm-pl-19 {
    padding-left: 76px;
  }

  .sm-pl-20 {
    padding-left: 80px;
  }

  .sm-pl-21 {
    padding-left: 84px;
  }

  .sm-pl-22 {
    padding-left: 88px;
  }

  .sm-pl-23 {
    padding-left: 92px;
  }

  .sm-pl-24 {
    padding-left: 96px;
  }

  .sm-pl-25 {
    padding-left: 100px;
  }

  .sm-pl-26 {
    padding-left: 104px;
  }

  .sm-pl-27 {
    padding-left: 108px;
  }

  .sm-pl-28 {
    padding-left: 112px;
  }

  .sm-pl-29 {
    padding-left: 116px;
  }

  .sm-pl-30 {
    padding-left: 120px;
  }

  /* Classes de padding vertical com o nome "py-valor" */
  .sm-py-1 {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .sm-py-2 {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .sm-py-3 {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .sm-py-4 {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .sm-py-5 {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .sm-py-6 {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .sm-py-7 {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .sm-py-8 {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .sm-py-9 {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .sm-py-10 {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .sm-py-11 {
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .sm-py-12 {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .sm-py-13 {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  .sm-py-14 {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .sm-py-15 {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .sm-py-16 {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .sm-py-17 {
    padding-top: 68px;
    padding-bottom: 68px;
  }

  .sm-py-18 {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .sm-py-19 {
    padding-top: 76px;
    padding-bottom: 76px;
  }

  .sm-py-20 {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .sm-py-21 {
    padding-top: 84px;
    padding-bottom: 84px;
  }

  .sm-py-22 {
    padding-top: 88px;
    padding-bottom: 88px;
  }

  .sm-py-23 {
    padding-top: 92px;
    padding-bottom: 92px;
  }

  .sm-py-24 {
    padding-top: 96px;
    padding-bottom: 96px;
  }

  .sm-py-25 {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .sm-py-26 {
    padding-top: 104px;
    padding-bottom: 104px;
  }

  .sm-py-27 {
    padding-top: 108px;
    padding-bottom: 108px;
  }

  .sm-py-28 {
    padding-top: 112px;
    padding-bottom: 112px;
  }

  .sm-py-29 {
    padding-top: 116px;
    padding-bottom: 116px;
  }

  .sm-py-30 {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  /* Classes de padding com o nome "px-valor" */
  .sm-px-1 {
    padding-left: 4px;
    padding-right: 4px;
  }

  .sm-px-2 {
    padding-left: 8px;
    padding-right: 8px;
  }

  .sm-px-3 {
    padding-left: 12px;
    padding-right: 12px;
  }

  .sm-px-4 {
    padding-left: 16px;
    padding-right: 16px;
  }

  .sm-px-5 {
    padding-left: 20px;
    padding-right: 20px;
  }

  .sm-px-6 {
    padding-left: 24px;
    padding-right: 24px;
  }

  .sm-px-7 {
    padding-left: 28px;
    padding-right: 28px;
  }

  .sm-px-8 {
    padding-left: 32px;
    padding-right: 32px;
  }

  .sm-px-9 {
    padding-left: 36px;
    padding-right: 36px;
  }

  .sm-px-10 {
    padding-left: 40px;
    padding-right: 40px;
  }

  .sm-px-11 {
    padding-left: 44px;
    padding-right: 44px;
  }

  .sm-px-12 {
    padding-left: 48px;
    padding-right: 48px;
  }

  .sm-px-13 {
    padding-left: 52px;
    padding-right: 52px;
  }

  .sm-px-14 {
    padding-left: 56px;
    padding-right: 56px;
  }

  .sm-px-15 {
    padding-left: 60px;
    padding-right: 60px;
  }

  .sm-px-16 {
    padding-left: 64px;
    padding-right: 64px;
  }

  .sm-px-17 {
    padding-left: 68px;
    padding-right: 68px;
  }

  .sm-px-18 {
    padding-left: 72px;
    padding-right: 72px;
  }

  .sm-px-19 {
    padding-left: 76px;
    padding-right: 76px;
  }

  .sm-px-20 {
    padding-left: 80px;
    padding-right: 80px;
  }

  .sm-px-21 {
    padding-left: 84px;
    padding-right: 84px;
  }

  .sm-px-22 {
    padding-left: 88px;
    padding-right: 88px;
  }

  .sm-px-23 {
    padding-left: 92px;
    padding-right: 92px;
  }

  .sm-px-24 {
    padding-left: 96px;
    padding-right: 96px;
  }

  .sm-px-25 {
    padding-left: 100px;
    padding-right: 100px;
  }

  .sm-px-26 {
    padding-left: 104px;
    padding-right: 104px;
  }

  .sm-px-27 {
    padding-left: 108px;
    padding-right: 108px;
  }

  .sm-px-28 {
    padding-left: 112px;
    padding-right: 112px;
  }

  .sm-px-29 {
    padding-left: 116px;
    padding-right: 116px;
  }

  .sm-px-30 {
    padding-left: 120px;
    padding-right: 120px;
  }

  /* PADDING PORCENTAGEM */

  .sm-p-1P {
    padding: 4%;
  }

  .sm-p-2P {
    padding: 8%;
  }

  .sm-p-3P {
    padding: 12%;
  }

  /* Classes de margin com o nome "p-valor" */
  .sm-m-1 {
    margin: 4px;
  }

  .sm-m-2 {
    margin: 8px;
  }

  .sm-m-3 {
    margin: 12px;
  }

  .sm-m-4 {
    margin: 16px;
  }

  .sm-m-5 {
    margin: 20px;
  }

  .sm-m-6 {
    margin: 24px;
  }

  .sm-m-7 {
    margin: 28px;
  }

  .sm-m-8 {
    margin: 32px;
  }

  .sm-m-9 {
    margin: 36px;
  }

  .sm-m-10 {
    margin: 40px;
  }

  .sm-m-11 {
    margin: 44px;
  }

  .sm-m-12 {
    margin: 48px;
  }

  .sm-m-13 {
    margin: 52px;
  }

  .sm-m-14 {
    margin: 56px;
  }

  .sm-m-15 {
    margin: 60px;
  }

  .sm-m-16 {
    margin: 64px;
  }

  .sm-m-17 {
    margin: 68px;
  }

  .sm-m-18 {
    margin: 72px;
  }

  .sm-m-19 {
    margin: 76px;
  }

  .sm-m-20 {
    margin: 80px;
  }

  .sm-m-21 {
    margin: 84px;
  }

  .sm-m-22 {
    margin: 88px;
  }

  .sm-m-23 {
    margin: 92px;
  }

  .sm-m-24 {
    margin: 96px;
  }

  .sm-m-25 {
    margin: 100px;
  }

  .sm-m-26 {
    margin: 104px;
  }

  .sm-m-27 {
    margin: 108px;
  }

  .sm-m-28 {
    margin: 112px;
  }

  .sm-m-29 {
    margin: 116px;
  }

  .sm-m-30 {
    margin: 120px;
  }

  /* Classes de margin com o nome "p-posicao-valor" */

  .sm-mt-1 {
    margin-top: 4px;
  }

  .sm-mt-2 {
    margin-top: 8px;
  }

  .sm-mt-3 {
    margin-top: 12px;
  }

  .sm-mt-4 {
    margin-top: 16px;
  }

  .sm-mt-5 {
    margin-top: 20px;
  }

  .sm-mt-6 {
    margin-top: 24px;
  }

  .sm-mt-7 {
    margin-top: 28px;
  }

  .sm-mt-8 {
    margin-top: 32px;
  }

  .sm-mt-9 {
    margin-top: 36px;
  }

  .sm-mt-10 {
    margin-top: 40px;
  }

  .sm-mt-11 {
    margin-top: 44px;
  }

  .sm-mt-12 {
    margin-top: 48px;
  }

  .sm-mt-13 {
    margin-top: 52px;
  }

  .sm-mt-14 {
    margin-top: 56px;
  }

  .sm-mt-15 {
    margin-top: 60px;
  }

  .sm-mt-16 {
    margin-top: 64px;
  }

  .sm-mt-17 {
    margin-top: 68px;
  }

  .sm-mt-18 {
    margin-top: 72px;
  }

  .sm-mt-19 {
    margin-top: 76px;
  }

  .sm-mt-20 {
    margin-top: 80px;
  }

  .sm-mt-21 {
    margin-top: 84px;
  }

  .sm-mt-22 {
    margin-top: 88px;
  }

  .sm-mt-23 {
    margin-top: 92px;
  }

  .sm-mt-24 {
    margin-top: 96px;
  }

  .sm-mt-25 {
    margin-top: 100px;
  }

  .sm-mt-26 {
    margin-top: 104;
  }

  .sm-mt-27 {
    margin-top: 108px;
  }

  .sm-mt-28 {
    margin-top: 112px;
  }

  .sm-mt-29 {
    margin-top: 116px;
  }

  .sm-mt-30 {
    margin-top: 120px;
  }

  .sm-mr-1 {
    margin-right: 4px;
  }

  .sm-mr-2 {
    margin-right: 8px;
  }

  .sm-mr-3 {
    margin-right: 12px;
  }

  .sm-mr-4 {
    margin-right: 16px;
  }

  .sm-mr-5 {
    margin-right: 20px;
  }

  .sm-mr-6 {
    margin-right: 24px;
  }

  .sm-mr-7 {
    margin-right: 28px;
  }

  .sm-mr-8 {
    margin-right: 32px;
  }

  .sm-mr-9 {
    margin-right: 36px;
  }

  .sm-mr-10 {
    margin-right: 40px;
  }

  .sm-mr-11 {
    margin-right: 44px;
  }

  .sm-mr-12 {
    margin-right: 48px;
  }

  .sm-mr-13 {
    margin-right: 52px;
  }

  .sm-mr-14 {
    margin-right: 56px;
  }

  .sm-mr-15 {
    margin-right: 60px;
  }

  .sm-mr-16 {
    margin-right: 64px;
  }

  .sm-mr-17 {
    margin-right: 68px;
  }

  .sm-mr-18 {
    margin-right: 72px;
  }

  .sm-mr-19 {
    margin-right: 76px;
  }

  .sm-mr-20 {
    margin-right: 80px;
  }

  .sm-mr-21 {
    margin-right: 84px;
  }

  .sm-mr-22 {
    margin-right: 88px;
  }

  .sm-mr-23 {
    margin-right: 92px;
  }

  .sm-mr-24 {
    margin-right: 96px;
  }

  .sm-mr-25 {
    margin-right: 100px;
  }

  .sm-mr-26 {
    margin-right: 104px;
  }

  .sm-mr-27 {
    margin-right: 108px;
  }

  .sm-mr-28 {
    margin-right: 112px;
  }

  .sm-mr-29 {
    margin-right: 116px;
  }

  .sm-mr-30 {
    margin-right: 120px;
  }

  .sm-mb-1 {
    margin-bottom: 4px;
  }

  .sm-mb-2 {
    margin-bottom: 8px;
  }

  .sm-mb-3 {
    margin-bottom: 12px;
  }

  .sm-mb-4 {
    margin-bottom: 16px;
  }

  .sm-mb-5 {
    margin-bottom: 20px;
  }

  .sm-mb-6 {
    margin-bottom: 24px;
  }

  .sm-mb-7 {
    margin-bottom: 28px;
  }

  .sm-mb-8 {
    margin-bottom: 32px;
  }

  .sm-mb-9 {
    margin-bottom: 36px;
  }

  .sm-mb-10 {
    margin-bottom: 40px;
  }

  .sm-mb-11 {
    margin-bottom: 44px;
  }

  .sm-mb-12 {
    margin-bottom: 48px;
  }

  .sm-mb-13 {
    margin-bottom: 52px;
  }

  .sm-mb-14 {
    margin-bottom: 56px;
  }

  .sm-mb-15 {
    margin-bottom: 60px;
  }

  .sm-mb-16 {
    margin-bottom: 64px;
  }

  .sm-mb-17 {
    margin-bottom: 68px;
  }

  .sm-mb-18 {
    margin-bottom: 72px;
  }

  .sm-mb-19 {
    margin-bottom: 76px;
  }

  .sm-mb-20 {
    margin-bottom: 80px;
  }

  .sm-mb-21 {
    margin-bottom: 84px;
  }

  .sm-mb-22 {
    margin-bottom: 88px;
  }

  .sm-mb-23 {
    margin-bottom: 92px;
  }

  .sm-mb-24 {
    margin-bottom: 96px;
  }

  .sm-mb-25 {
    margin-bottom: 100px;
  }

  .sm-mb-26 {
    margin-bottom: 104px;
  }

  .sm-mb-27 {
    margin-bottom: 108px;
  }

  .sm-mb-28 {
    margin-bottom: 112px;
  }

  .sm-mb-29 {
    margin-bottom: 116px;
  }

  .sm-mb-30 {
    margin-bottom: 120px;
  }

  .sm-ml-1 {
    margin-left: 4px;
  }

  .sm-ml-2 {
    margin-left: 8px;
  }

  .sm-ml-3 {
    margin-left: 12px;
  }

  .sm-ml-4 {
    margin-left: 16px;
  }

  .sm-ml-5 {
    margin-left: 20px;
  }

  .sm-ml-6 {
    margin-left: 24px;
  }

  .sm-ml-7 {
    margin-left: 28px;
  }

  .sm-ml-8 {
    margin-left: 32px;
  }

  .sm-ml-9 {
    margin-left: 36px;
  }

  .sm-ml-10 {
    margin-left: 40px;
  }

  .sm-ml-11 {
    margin-left: 44px;
  }

  .sm-ml-12 {
    margin-left: 48px;
  }

  .sm-ml-13 {
    margin-left: 52px;
  }

  .sm-ml-14 {
    margin-left: 56px;
  }

  .sm-ml-15 {
    margin-left: 60px;
  }

  .sm-ml-16 {
    margin-left: 64px;
  }

  .sm-ml-17 {
    margin-left: 68px;
  }

  .sm-ml-18 {
    margin-left: 72px;
  }

  .sm-ml-19 {
    margin-left: 76px;
  }

  .sm-ml-20 {
    margin-left: 80px;
  }

  .sm-ml-21 {
    margin-left: 84px;
  }

  .sm-ml-22 {
    margin-left: 88px;
  }

  .sm-ml-23 {
    margin-left: 92px;
  }

  .sm-ml-24 {
    margin-left: 96px;
  }

  .sm-ml-25 {
    margin-left: 100px;
  }

  .sm-ml-26 {
    margin-left: 104px;
  }

  .sm-ml-27 {
    margin-left: 108px;
  }

  .sm-ml-28 {
    margin-left: 112px;
  }

  .sm-ml-29 {
    margin-left: 116px;
  }

  .sm-ml-30 {
    margin-left: 120px;
  }

  /* Classes de margin vertical com o nome "py-valor" */
  .sm-my-1 {
    margin-top: 4px;
    margin-bottom: 4px;
  }

  .sm-my-2 {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .sm-my-3 {
    margin-top: 12px;
    margin-bottom: 12px;
  }

  .sm-my-4 {
    margin-top: 16px;
    margin-bottom: 16px;
  }

  .sm-my-5 {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .sm-my-6 {
    margin-top: 24px;
    margin-bottom: 24px;
  }

  .sm-my-7 {
    margin-top: 28px;
    margin-bottom: 28px;
  }

  .sm-my-8 {
    margin-top: 32px;
    margin-bottom: 32px;
  }

  .sm-my-9 {
    margin-top: 36px;
    margin-bottom: 36px;
  }

  .sm-my-10 {
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .sm-my-11 {
    margin-top: 44px;
    margin-bottom: 44px;
  }

  .sm-my-12 {
    margin-top: 48px;
    margin-bottom: 48px;
  }

  .sm-my-13 {
    margin-top: 52px;
    margin-bottom: 52px;
  }

  .sm-my-14 {
    margin-top: 56px;
    margin-bottom: 56px;
  }

  .sm-my-15 {
    margin-top: 60px;
    margin-bottom: 60px;
  }

  .sm-my-16 {
    margin-top: 64px;
    margin-bottom: 64px;
  }

  .sm-my-17 {
    margin-top: 68px;
    margin-bottom: 68px;
  }

  .sm-my-18 {
    margin-top: 72px;
    margin-bottom: 72px;
  }

  .sm-my-19 {
    margin-top: 76px;
    margin-bottom: 76px;
  }

  .sm-my-20 {
    margin-top: 80px;
    margin-bottom: 80px;
  }

  .sm-my-21 {
    margin-top: 84px;
    margin-bottom: 84px;
  }

  .sm-my-22 {
    margin-top: 88px;
    margin-bottom: 88px;
  }

  .sm-my-23 {
    margin-top: 92px;
    margin-bottom: 92px;
  }

  .sm-my-24 {
    margin-top: 96px;
    margin-bottom: 96px;
  }

  .sm-my-25 {
    margin-top: 100px;
    margin-bottom: 100px;
  }

  .sm-my-26 {
    margin-top: 104px;
    margin-bottom: 104px;
  }

  .sm-my-27 {
    margin-top: 108px;
    margin-bottom: 108px;
  }

  .sm-my-28 {
    margin-top: 112px;
    margin-bottom: 112px;
  }

  .sm-my-29 {
    margin-top: 116px;
    margin-bottom: 116px;
  }

  .sm-my-30 {
    margin-top: 120px;
    margin-bottom: 120px;
  }

  /* Classes de margin com o nome "px-valor" */
  .sm-px-1 {
    margin-left: 4px;
    margin-right: 4px;
  }

  .sm-mx-2 {
    margin-left: 8px;
    margin-right: 8px;
  }

  .sm-mx-3 {
    margin-left: 12px;
    margin-right: 12px;
  }

  .sm-mx-4 {
    margin-left: 16px;
    margin-right: 16px;
  }

  .sm-mx-5 {
    margin-left: 20px;
    margin-right: 20px;
  }

  .sm-mx-6 {
    margin-left: 24px;
    margin-right: 24px;
  }

  .sm-mx-7 {
    margin-left: 28px;
    margin-right: 28px;
  }

  .sm-mx-8 {
    margin-left: 32px;
    margin-right: 32px;
  }

  .sm-mx-9 {
    margin-left: 36px;
    margin-right: 36px;
  }

  .sm-mx-10 {
    margin-left: 40px;
    margin-right: 40px;
  }

  .sm-mx-11 {
    margin-left: 44px;
    margin-right: 44px;
  }

  .sm-mx-12 {
    margin-left: 48px;
    margin-right: 48px;
  }

  .sm-mx-13 {
    margin-left: 52px;
    margin-right: 52px;
  }

  .sm-mx-14 {
    margin-left: 56px;
    margin-right: 56px;
  }

  .sm-mx-15 {
    margin-left: 60px;
    margin-right: 60px;
  }

  .sm-mx-16 {
    margin-left: 64px;
    margin-right: 64px;
  }

  .sm-mx-17 {
    margin-left: 68px;
    margin-right: 68px;
  }

  .sm-mx-18 {
    margin-left: 72px;
    margin-right: 72px;
  }

  .sm-mx-19 {
    margin-left: 76px;
    margin-right: 76px;
  }

  .sm-mx-20 {
    margin-left: 80px;
    margin-right: 80px;
  }

  .sm-mx-21 {
    margin-left: 84px;
    margin-right: 84px;
  }

  .sm-mx-22 {
    margin-left: 88px;
    margin-right: 88px;
  }

  .sm-mx-23 {
    margin-left: 92px;
    margin-right: 92px;
  }

  .sm-mx-24 {
    margin-left: 96px;
    margin-right: 96px;
  }

  .sm-mx-25 {
    margin-left: 100px;
    margin-right: 100px;
  }

  .sm-mx-26 {
    margin-left: 104px;
    margin-right: 104px;
  }

  .sm-mx-27 {
    margin-left: 108px;
    margin-right: 108px;
  }

  .sm-mx-28 {
    margin-left: 112px;
    margin-right: 112px;
  }

  .sm-mx-29 {
    margin-left: 116px;
    margin-right: 116px;
  }

  .sm-mx-30 {
    margin-left: 120px;
    margin-right: 120px;
  }

  /* Margin Porcentagem */
  .sm-m-1P {
    margin: 4%;
  }

  .sm-m-2P {
    margin: 8%;
  }

  .sm-m-3P {
    margin: 12%;
  }

  /* Border radius */
  .sm-rounded-1 {
    border-radius: 4px;
  }

  .sm-rounded-2 {
    border-radius: 8px;
  }

  .sm-rounded-3 {
    border-radius: 12px;
  }

  .sm-rounded-4 {
    border-radius: 16px;
  }

  .sm-rounded-5 {
    border-radius: 20px;
  }

  .sm-rounded-6 {
    border-radius: 24px;
  }

  .sm-rounded-full {
    border-radius: 50%;
  }
  .sm-rounded-50 {
    border-radius: 50px;
  }

  /* Shadow */
  .sm-shadow-sm {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }

  .sm-shadow-md {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .sm-shadow-lg {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  }
  .sm-flex {
    display: flex;
  }

  /* Flex direction */
  .sm-flex-row {
    flex-direction: row;
  }

  .sm-flex-col {
    flex-direction: column;
  }

  /* Flex wrap */
  .sm-flex-wrap {
    flex-wrap: wrap;
  }

  /* Justify content */
  .sm-justify-start {
    justify-content: flex-start;
  }

  .sm-justify-end {
    justify-content: flex-end;
  }

  .sm-justify-center {
    justify-content: center;
  }

  .sm-justify-between {
    justify-content: space-between;
  }

  .sm-justify-around {
    justify-content: space-around;
  }

  /* Align items */
  .sm-items-start {
    align-items: flex-start;
  }

  .sm-items-end {
    align-items: flex-end;
  }

  .sm-items-center {
    align-items: center;
  }

  .sm-items-baseline {
    align-items: baseline;
  }

  .sm-items-stretch {
    align-items: stretch;
  }

  /* Align content */
  .sm-content-start {
    align-content: flex-start;
  }

  .sm-content-end {
    align-content: flex-end;
  }

  .sm-content-center {
    align-content: center;
  }

  .sm-content-between {
    align-content: space-between;
  }

  .sm-content-around {
    align-content: space-around;
  }

  .sm-content-stretch {
    align-content: stretch;
  }

  /* Flex item */
  .sm-flex-1 {
    flex: 1;
  }

  .sm-flex-auto {
    flex: auto;
  }

  .sm-flex-initial {
    flex: initial;
  }

  .sm-flex-none {
    flex: none;
  }

  /* Align self */
  .sm-self-auto {
    align-self: auto;
  }

  .sm-self-start {
    align-self: flex-start;
  }

  .sm-self-end {
    align-self: flex-end;
  }

  .sm-self-center {
    align-self: center;
  }

  .sm-self-stretch {
    align-self: stretch;
  }
  .sm-gap-1 {
    gap: 4px;
  }

  .sm-gap-2 {
    gap: 8px;
  }

  .sm-gap-3 {
    gap: 16px;
  }

  .sm-gap-4 {
    gap: 24px;
  }

  .sm-gap-5 {
    gap: 32px;
  }
  .sm-gap-6 {
    gap: 40px;
  }
  .sm-gap-7 {
    gap: 48px;
  }
  .sm-gap-8 {
    gap: 56px;
  }
  .sm-gap-9 {
    gap: 64px;
  }
  .sm-gap-10 {
    gap: 72px;
  }
  .sm-gap-11 {
    gap: 80px;
  }
  .sm-gap-12 {
    gap: 88px;
  }
  .sm-gap-13 {
    gap: 96px;
  }
  .sm-gap-14 {
    gap: 104px;
  }
  .sm-gap-15 {
    gap: 112px;
  }
  .sm-w-1 {
    width: 10%;
  }
  .sm-w-2 {
    width: 20%;
  }
  .sm-w-3 {
    width: 30%;
  }
  .sm-w-4 {
    width: 40%;
  }
  .sm-w-5 {
    width: 50%;
  }
  .sm-w-6 {
    width: 60%;
  }
  .sm-w-7 {
    width: 70%;
  }
  .sm-w-8 {
    width: 80%;
  }
  .sm-w-9 {
    width: 90%;
  }
  .sm-w-full {
    width: 100%;
  }
  .sm-w-auto {
    width: auto;
  }
  .sm-w-fit-content {
    width: fit-content;
  }
  .sm-h-1 {
    height: 12px;
  }
  .sm-h-2 {
    height: 24px;
  }
  .sm-h-3 {
    height: 36px;
  }
  .sm-h-4 {
    height: 48px;
  }
  .sm-h-5 {
    height: 60px;
  }
  .sm-h-6 {
    height: 72px;
  }
  .sm-h-7 {
    height: 84px;
  }
  .sm-h-8 {
    height: 96px;
  }
  .sm-h-9 {
    height: 108px;
  }
  .sm-h-full {
    height: 100%;
  }
  .sm-h-screen {
    height: 100vh;
  }
  .sm-h-fit-content {
    height: fit-content;
  }

  /* Classes para posição */
  .sm-relative {
    position: relative;
  }
  .sm-absolute {
    position: absolute;
  }
  .sm-fixed {
    position: fixed;
  }
  .sm-static {
    position: static;
  }
  .sm-sticky {
    position: sticky;
  }
  /* Classes para posição */
  .sm-top-0 {
    top: 0;
  }
  .sm-right-0 {
    right: 0;
  }
  .sm-bottom-0 {
    bottom: 0;
  }
  .sm-left-0 {
    left: 0;
  }

  /* Classes para overflow */
  .sm-overflow-auto {
    overflow: auto;
  }
  .sm-overflow-hidden {
    overflow: hidden;
  }
  .sm-overflow-visible {
    overflow: visible;
  }
  .sm-overflow-scroll {
    overflow: scroll;
  }
  .sm-overflow-x-auto {
    overflow-x: auto;
  }
  .sm-overflow-x-hidden {
    overflow-x: hidden;
  }
  .sm-overflow-x-visible {
    overflow-x: visible;
  }
  .sm-overflow-x-scroll {
    overflow-x: scroll;
  }
  .sm-overflow-y-auto {
    overflow-y: auto;
  }
  .sm-overflow-y-hidden {
    overflow-y: hidden;
  }
  .sm-overflow-y-visible {
    overflow-y: visible;
  }
  .sm-overflow-y-scroll {
    overflow-y: scroll;
  }
  .sm-text-xs {
    font-size: 0.75rem;
  }
  .sm-text-sm {
    font-size: 0.875rem;
  }
  .sm-text-base {
    font-size: 1rem;
  }
  .sm-text-lg {
    font-size: 1.125rem;
  }
  .sm-text-xl {
    font-size: 1.25rem;
  }
  .sm-text-2xl {
    font-size: 1.5rem;
  }
  .sm-text-3xl {
    font-size: 1.875rem;
  }
  .sm-text-4xl {
    font-size: 2.5rem;
  }
  .sm-text-5xl {
    font-size: 3rem;
  }
  .sm-text-6xl {
    font-size: 4rem;
  }
  .sm-text-7xl {
    font-size: 5rem;
  }
  .sm-text-8xl {
    font-size: 6rem;
  }
  .sm-text-9xl {
    font-size: 6.5rem;
  }
  .sm-font-thin {
    font-weight: 100;
  }
  .sm-font-extralight {
    font-weight: 200;
  }
  .sm-font-light {
    font-weight: 300;
  }
  .sm-font-normal {
    font-weight: 400;
  }
  .sm-font-medium {
    font-weight: 500;
  }
  .sm-font-semibold {
    font-weight: 600;
  }
  .sm-font-bold {
    font-weight: 700;
  }
  .sm-font-extrabold {
    font-weight: 800;
  }
  .sm-font-black {
    font-weight: 900;
  }
  .sm-opacity-0 {
    opacity: 0;
  }

  .sm-opacity-25 {
    opacity: 0.25;
  }

  .sm-opacity-50 {
    opacity: 0.5;
  }

  .sm-opacity-75 {
    opacity: 0.75;
  }

  .sm-opacity-100 {
    opacity: 1;
  }

  .sm-leading-none {
    line-height: 1;
  }

  .sm-leading-tight {
    line-height: 1.25;
  }

  .sm-leading-normal {
    line-height: 1.5;
  }

  .sm-leading-relaxed {
    line-height: 1.625;
  }

  .sm-leading-loose {
    line-height: 2;
  }

  .sm-block {
    display: block;
  }

  .sm-inline-block {
    display: inline-block;
  }

  .sm-inline {
    display: inline;
  }

  .sm-inline-flex {
    display: inline-flex;
  }

  .sm-inline-grid {
    display: inline-grid;
  }

  .sm-table {
    display: table;
  }

  .sm-table-caption {
    display: table-caption;
  }

  .sm-table-cell {
    display: table-cell;
  }

  .sm-table-column {
    display: table-column;
  }

  .sm-table-column-group {
    display: table-column-group;
  }

  .sm-table-footer-group {
    display: table-footer-group;
  }

  .sm-table-header-group {
    display: table-header-group;
  }

  .sm-table-row {
    display: table-row;
  }

  .sm-table-row-group {
    display: table-row-group;
  }

  .sm-hidden {
    display: none !important;
  }
  /* Text Align - Small Screen */
  .sm-text-left {
    text-align: left !important;
  }

  .sm-text-center {
    text-align: center !important;
  }

  .sm-text-right {
    text-align: right !important;
  }

  .sm-text-justify {
    text-align: justify !important;
  }
  .sm-aspect-ratio-custom{
    aspect-ratio: var(--aspect-ratio-custom);
  }
}



/* 1. Bouncing ball */
@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-50px); }
  100% { transform: translateY(0); }
}

/* 2. Spinning circle */
@keyframes spin {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

/* 3. Fading in */
@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.fade-in {
  animation: fade-in 1s;
}

.fade-in-init{
  opacity: 0;
}

/* 4. Fading out */
@keyframes fade-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.fade-out {
  animation: fade-out 1s;
}

.fade-out-init{
  opacity: 1;
}

/* 5. Sliding in from left */
@keyframes slide-in-left {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}

.slide-in-left {
  animation: slide-in-left 1s;
}
.slide-in-left-init {
  transform: translateX(-100%);
}

/* 6. Sliding in from right */
@keyframes slide-in-right {
  0% { transform: translateX(100%); }
  100% { transform: translateX(0); }
}

.slide-in-right {
  animation: slide-in-right 1s;
}

.slide-in-right-init {
  transform: translateX(100%);
}

/* 7. Zoom in */
@keyframes zoom-in {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

.zoom-in {
  animation: zoom-in 1s;
}
.zoom-in-init {
  transform: scale(0);
}

/* 8. Zoom out */
@keyframes zoom-out {
  0% { transform: scale(1); }
  100% { transform: scale(0); }
}

.zoom-out {
  animation: zoom-out 1s;
}

.zoom-out-init {
  transform: scale(1);
}

/* 9. Pulse */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.pulse {
  animation: pulse 1s infinite;
}
.pulse-init {
  transform: scale(1);
}

/* 10. Shake */
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
  75% { transform: translateX(-10px); }
  100% { transform: translateX(0); }
}

.shake {
  animation: shake 1s;
}

.shake-init {
  transform: translateX(0);
}

/* 11. Rotate */
@keyframes rotate {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

.rotate {
  animation: rotate 1s infinite;
}

.rotate-init {
  transform: rotate(0);
}

/* 12. Flip horizontal */
@keyframes flip-h {
  0% { transform: scaleX(1); }
  100% { transform: scaleX(-1); }
}

.flip-h {
  animation: flip-h 1s
}
.flip-h-init {
  transform: scaleX(1);
}

/* 13. Flip vertical */
@keyframes flip-v {
  0% { transform: scaleY(1); }
  100% { transform: scaleY(-1); }
}

.flip-v {
  animation: flip-v 1s;
}
.flip-v-init {
  transform: scaleY(1);
}

/* 14. Blink */
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

.blink {
  animation: blink 1s infinite;
}
.blink-init {
  opacity: 1;
}

/* 15. Slide up */
@keyframes slide-up {
  0% { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1;}
}

.slide-up {
  animation: slide-up 1s;
}
.slide-up-init {
  opacity: 0;
  transform: translateY(100%);
}

/* 16. Slide down */
@keyframes slide-down {
  0% { transform: translateY(-100%); opacity: 0;}
  100% { transform: translateY(0); opacity: 1;}
}

.slide-down {
  animation: slide-down 1s;
}
.slide-down-init {
  opacity: 0;
  transform: translateY(-100%);
}

/* 17. Swing */
@keyframes swing {
  0% { transform: rotate(0); }
  25% { transform: rotate(15deg); }
  50% { transform: rotate(-10deg); }
  75% { transform: rotate(5deg); }
  100% { transform: rotate(0); }
}

.swing {
  transform-origin: top center;
  animation: swing 1s;
}
.swing-init {
  transform: rotate(0);
}

/* 18. Flash */
@keyframes flash {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

.flash {
  animation: flash 1s infinite;
}
.flash-init {
  opacity: 1;
}

/* 19. Jiggle */
@keyframes jiggle {
  0% { transform: rotate(0); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(-5deg); }
   75% { transform: rotate(5deg); }
  100% { transform: rotate(0); }
}

.jiggle {
  animation: jiggle 1s;
}
.jiggle-init {
  transform: rotate(0);
}

/* 20. Pop */
@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.pop {
  animation: pop 1s;
}
.pop-init {
  transform: scale(1);
}

.infinite{
  animation-iteration-count: infinite !important;
}

.useScrollAnimator{
  animation-fill-mode: forwards;
}