@media (min-width: 768px) {
    /* Margin */
    .my-1 {margin-top: 16px; margin-bottom: 16px;}
    .my-2 {margin-top: 32px; margin-bottom: 32px;}
    .my-3 {margin-top: 48px; margin-bottom: 48px;}
    
    .mt-1 {margin-top: 16px !important;}
    .mt-2 {margin-top: 32px !important;}
    .mt-3 {margin-top: 48px !important;}

    .mb-1 {margin-bottom: 16px !important;}
    .mb-2 {margin-bottom: 32px !important;}
    .mb-3 {margin-bottom: 48px !important;}

    .mx-1 {margin-left: 16px !important; margin-right: 16px !important;}
    .mx-2 {margin-left: 32px !important; margin-right: 32px !important;}
    .mx-3 {margin-left: 48px !important; margin-right: 48px !important;}

    /* Padding */
    .pt-1 {padding-top: 16px !important;}
    .pt-2 {padding-top: 32px !important;}
    .pt-3 {padding-top: 48px !important;}

    .pb-1 {padding-bottom: 16px !important;}
    .pb-2 {padding-bottom: 32px !important;}
    .pb-3 {padding-bottom: 48px !important;}

    .px-1 {padding-left: 16px !important; padding-right: 16px !important;}
    .px-2 {padding-left: 32px !important; padding-right: 32px !important;}
    .px-3 {padding-left: 48px !important; padding-right: 48px !important;}
}

@media (max-width: 767px) {
    /* Margin */
    .my-1 {margin-top: 8px; margin-bottom: 8px;}
    .my-2 {margin-top: 16px; margin-bottom: 16px;}
    .my-3 {margin-top: 24px; margin-bottom: 24px;}

    .mt-1 {margin-top: 8px !important;}
    .mt-2 {margin-top: 16px !important;}
    .mt-3 {margin-top: 24px !important;}

    .mb-1 {margin-bottom: 8px !important;}
    .mb-2 {margin-bottom: 16px !important;}
    .mb-3 {margin-bottom: 24px !important;}

    .mx-1 {margin-left: 8px !important; margin-right: 8px !important;}
    .mx-2 {margin-left: 16px !important; margin-right: 16px !important;}
    .mx-3 {margin-left: 24px !important; margin-right: 24px !important;}

    /* Padding */
    .pt-1 {padding-top: 8px !important;}
    .pt-2 {padding-top: 16px !important;}
    .pt-3 {padding-top: 24px !important;}

    .pb-1 {padding-bottom: 8px !important;}
    .pb-2 {padding-bottom: 16px !important;}
    .pb-3 {padding-bottom: 24px !important;}

    .px-1 {padding-left: 8px !important; padding-right: 8px !important;}
    .px-2 {padding-left: 16px !important; padding-right: 16px !important;}
    .px-3 {padding-left: 24px !important; padding-right: 24px !important;}
}