.m, .gutters {
    &-none { margin: 0; }
    &-auto { margin: auto; }
}

.m {
    &l-auto {
        margin-left: auto;
    }

    &t-auto {
        margin-top: auto;
    }

    &b-auto {
        margin-bottom: auto;
    }

    &r-auto {
        margin-right: auto;
    }
}

.p{
    &-none { margin: 0; }
    &-auto { margin: auto; }
}

.p {
    &l-auto {
        padding-left: auto;
    }

    &t-auto {
        padding-top: auto;
    }

    &b-auto {
        padding-bottom: auto;
    }

    &r-auto {
        padding-right: auto;
    }
}

body .desktop {
    @media (min-width: $desktop-breakpoint) {
        &-m, &-gutters {
            &-none { margin: 0; }
            &-auto { margin: auto; }
        }

        &-p {
            &-none { padding: 0; }
            &-auto { padding: auto; }
        }
    }
}

@each $name in $sizes {
    $spacing: ($spacing-iter * $spacing-magnitude) * $spacing-iter + $spacing-unit;

    .m {
        &-#{$name} { margin: $spacing; }
        &l-#{$name}, &x-#{$name} { margin-left: $spacing; }
        &t-#{$name}, &y-#{$name} { margin-top: $spacing; }
        &r-#{$name}, &x-#{$name} { margin-right: $spacing; }
        &b-#{$name}, &y-#{$name} { margin-bottom: $spacing; }
    }

    .p {
        &-#{$name} { padding: $spacing; }
        &l-#{$name}, &x-#{$name} { padding-left: $spacing; }
        &t-#{$name}, &y-#{$name} { padding-top: $spacing; }
        &r-#{$name}, &x-#{$name} { padding-right: $spacing; }
        &b-#{$name}, &y-#{$name} { padding-bottom: $spacing; }
    }

    .gutters {
        &-l-#{$name} > { :not(:first-child) {margin-left: $spacing;} }
        &-t-#{$name} > { :not(:first-child) {margin-top: $spacing;} }
        &-r-#{$name} > { :not(:last-child) {margin-right: $spacing;} }
        &-b-#{$name} > { :not(:last-child) {margin-bottom: $spacing;} }
    }

    body .desktop {
        @media (min-width: $desktop-breakpoint) {
            &-m {
                &-#{$name} { margin: $spacing; }
                &l-#{$name}, &x-#{$name} { margin-left: $spacing; }
                &t-#{$name}, &y-#{$name} { margin-top: $spacing; }
                &r-#{$name}, &x-#{$name} { margin-right: $spacing; }
                &b-#{$name}, &y-#{$name} { margin-bottom: $spacing; }
            }
    
            &-p {
                &-#{$name} { padding: $spacing; }
                &l-#{$name}, &x-#{$name} { padding-left: $spacing; }
                &t-#{$name}, &y-#{$name} { padding-top: $spacing; }
                &r-#{$name}, &x-#{$name} { padding-right: $spacing; }
                &b-#{$name}, &y-#{$name} { padding-bottom: $spacing; }
            }

            &-gutters {
                &-l-#{$name} > { :not(:first-child) {margin-left: $spacing;} }
                &-t-#{$name} > { :not(:first-child) {margin-top: $spacing;} }
                &-r-#{$name} > { :not(:last-child) {margin-right: $spacing;} }
                &-b-#{$name} > { :not(:last-child) {margin-bottom: $spacing;} }
            }
    
        }
    }

    $spacing-iter: $spacing-iter + 1;
}