@media (min-width: 768px) {
    /* Margin */
    .m-1 {margin: 16px;}
    .m-2 {margin: 32px;}
    .m-3 {margin: 48px;}
    
    .my-1 {margin-top: 16px; margin-bottom: 16px;}
    .my-2 {margin-top: 32px; margin-bottom: 32px;}
    .my-3 {margin-top: 48px; margin-bottom: 48px;}
    
    .mx-1 {margin-left: 16px; margin-right: 16px;}
    .mx-2 {margin-left: 32px; margin-right: 32px;}
    .mx-3 {margin-left: 48px; margin-right: 48px;}
    
    .mt-1 {margin-top: 16px;}
    .mt-2 {margin-top: 32px;}
    .mt-3 {margin-top: 48px;}
    
    .mb-1 {margin-bottom: 16px;}
    .mb-2 {margin-bottom: 32px;}
    .mb-3 {margin-bottom: 48px;}
    
    .ml-1 {margin-left: 16px;}
    .ml-2 {margin-left: 32px;}
    .ml-3 {margin-left: 48px;}
    
    .mr-1 {margin-right: 16px;}
    .mr-2 {margin-right: 32px;}
    .mr-3 {margin-right: 48px;}
    
    /* Padding */
    .p-1 {padding: 16px;}
    .p-2 {padding: 32px;}
    .p-3 {padding: 48px;}
    
    .py-1 {padding-top: 16px; padding-bottom: 16px;}
    .py-2 {padding-top: 32px; padding-bottom: 32px;}
    .py-3 {padding-top: 48px; padding-bottom: 48px;}
    
    .px-1 {padding-left: 16px; padding-right: 16px;}
    .px-2 {padding-left: 32px; padding-right: 32px;}
    .px-3 {padding-left: 48px; padding-right: 48px;}
    
    .pt-1 {padding-top: 16px;}
    .pt-2 {padding-top: 32px;}
    .pt-3 {padding-top: 48px;}
    
    .pb-1 {padding-bottom: 16px;}
    .pb-2 {padding-bottom: 32px;}
    .pb-3 {padding-bottom: 48px;}
    
    .pl-1 {padding-left: 16px;}
    .pl-2 {padding-left: 32px;}
    .pl-3 {padding-left: 48px;}
    
    .pr-1 {padding-right: 16px;}
    .pr-2 {padding-right: 32px;}
    .pr-3 {padding-right: 48px;}
}

@media (max-width: 767px) {
    /* Margin */
    .m-1 {margin: 8px;}
    .m-2 {margin: 16px;}
    .m-3 {margin: 24px;}
    
    .my-1 {margin-top: 8px; margin-bottom: 8px;}
    .my-2 {margin-top: 16px; margin-bottom: 16px;}
    .my-3 {margin-top: 24px; margin-bottom: 24px;}
    
    .mx-1 {margin-left: 8px; margin-right: 8px;}
    .mx-2 {margin-left: 16px; margin-right: 16px;}
    .mx-3 {margin-left: 24px; margin-right: 24px;}
    
    .mt-1 {margin-top: 8px;}
    .mt-2 {margin-top: 16px;}
    .mt-3 {margin-top: 24px;}
    
    .mb-1 {margin-bottom: 8px;}
    .mb-2 {margin-bottom: 16px;}
    .mb-3 {margin-bottom: 24px;}
    
    .ml-1 {margin-left: 8px;}
    .ml-2 {margin-left: 16px;}
    .ml-3 {margin-left: 24px;}
    
    .mr-1 {margin-right: 8px;}
    .mr-2 {margin-right: 16px;}
    .mr-3 {margin-right: 24px;}
    
    /* Padding */
    .p-1 {padding: 8px;}
    .p-2 {padding: 16px;}
    .p-3 {padding: 24px;}
    
    .py-1 {padding-top: 8px; padding-bottom: 8px;}
    .py-2 {padding-top: 16px; padding-bottom: 16px;}
    .py-3 {padding-top: 24px; padding-bottom: 24px;}
    
    .px-1 {padding-left: 8px; padding-right: 8px;}
    .px-2 {padding-left: 16px; padding-right: 16px;}
    .px-3 {padding-left: 24px; padding-right: 24px;}
    
    .pt-1 {padding-top: 8px;}
    .pt-2 {padding-top: 16px;}
    .pt-3 {padding-top: 24px;}
    
    .pb-1 {padding-bottom: 8px;}
    .pb-2 {padding-bottom: 16px;}
    .pb-3 {padding-bottom: 24px;}
    
    .pl-1 {padding-left: 8px;}
    .pl-2 {padding-left: 16px;}
    .pl-3 {padding-left: 24px;}
    
    .pr-1 {padding-right: 8px;}
    .pr-2 {padding-right: 16px;}
    .pr-3 {padding-right: 24px;}
}