// controls the margin, padding, and alignment at each breakpoint

// horizontal padding XS
.ph-xs-0 { padding-left: 0; padding-right: 0; }
.ph-xs-1 { padding-left: 1rem; padding-right: 1rem; }
.ph-xs-2 { padding-left: 2rem; padding-right: 2rem; }
.ph-xs-3 { padding-left: 3rem; padding-right: 3rem; }
.ph-xs-4 { padding-left: 4rem; padding-right: 4rem; }
.ph-xs-5 { padding-left: 5rem; padding-right: 5rem; }
.ph-xs-6 { padding-left: 6rem; padding-right: 6rem; }
.ph-xs-7 { padding-left: 7rem; padding-right: 7rem; }
.ph-xs-8 { padding-left: 8rem; padding-right: 8rem; }
.ph-xs-9 { padding-left: 9rem; padding-right: 9rem; }
.ph-xs-10 { padding-left: 10rem; padding-right: 10rem; }
.ph-xs-11 { padding-left: 11rem; padding-right: 11rem; }
.ph-xs-12 { padding-left: 12rem; padding-right: 12rem; }

// vertical padding XS
.pv-xs-0 { padding-top: 0; padding-bottom: 0; }
.pv-xs-1 { padding-top: 1rem; padding-bottom: 1rem; }
.pv-xs-2 { padding-top: 2rem; padding-bottom: 2rem; }
.pv-xs-3 { padding-top: 3rem; padding-bottom: 3rem; }
.pv-xs-4 { padding-top: 4rem; padding-bottom: 4rem; }
.pv-xs-5 { padding-top: 5rem; padding-bottom: 5rem; }
.pv-xs-6 { padding-top: 6rem; padding-bottom: 6rem; }
.pv-xs-7 { padding-top: 7rem; padding-bottom: 7rem; }
.pv-xs-8 { padding-top: 8rem; padding-bottom: 8rem; }
.pv-xs-9 { padding-top: 9rem; padding-bottom: 9rem; }
.pv-xs-10 { padding-top: 10rem; padding-bottom: 10rem; }
.pv-xs-11 { padding-top: 11rem; padding-bottom: 11rem; }
.pv-xs-12 { padding-top: 12rem; padding-bottom: 12rem; }

// XS - margin top
.mt-xs-0 { margin-top: 0; }
.mt-xs-1 { margin-top: 1rem; }
.mt-xs-2 { margin-top: 2rem; }
.mt-xs-3 { margin-top: 3rem; }
.mt-xs-4 { margin-top: 4rem; }
.mt-xs-5 { margin-top: 5rem; }
.mt-xs-6 { margin-top: 6rem; }
.mt-xs-7 { margin-top: 7rem; }
.mt-xs-8 { margin-top: 8rem; }
.mt-xs-9 { margin-top: 9rem; }
.mt-xs-10 { margin-top: 10rem; }
.mt-xs-11 { margin-top: 11rem; }
.mt-xs-12 { margin-top: 12rem; }

// XS - margin bottom
.mb-xs-0 { margin-bottom: 0; }
.mb-xs-1 { margin-bottom: 1rem; }
.mb-xs-2 { margin-bottom: 2rem; }
.mb-xs-3 { margin-bottom: 3rem; }
.mb-xs-4 { margin-bottom: 4rem; }
.mb-xs-5 { margin-bottom: 5rem; }
.mb-xs-6 { margin-bottom: 6rem; }
.mb-xs-7 { margin-bottom: 7rem; }
.mb-xs-8 { margin-bottom: 8rem; }
.mb-xs-9 { margin-bottom: 9rem; }
.mb-xs-10 { margin-bottom: 10rem; }
.mb-xs-11 { margin-bottom: 11rem; }
.mb-xs-12 { margin-bottom: 12rem; }

@media #{$screen-sm}{
    // horizontal padding MD
    .ph-sm-0 { padding-left: 0; padding-right: 0; }
    .ph-sm-1 { padding-left: 1rem; padding-right: 1rem; }
    .ph-sm-2 { padding-left: 2rem; padding-right: 2rem; }
    .ph-sm-3 { padding-left: 3rem; padding-right: 3rem; }
    .ph-sm-4 { padding-left: 4rem; padding-right: 4rem; }
    .ph-sm-5 { padding-left: 5rem; padding-right: 5rem; }
    .ph-sm-6 { padding-left: 6rem; padding-right: 6rem; }
    .ph-sm-7 { padding-left: 7rem; padding-right: 7rem; }
    .ph-sm-8 { padding-left: 8rem; padding-right: 8rem; }
    .ph-sm-9 { padding-left: 9rem; padding-right: 9rem; }
    .ph-sm-10 { padding-left: 10rem; padding-right: 10rem; }
    .ph-sm-11 { padding-left: 11rem; padding-right: 11rem; }
    .ph-sm-12 { padding-left: 12rem; padding-right: 12rem; }

    // vertical padding
    .pv-sm-0 { padding-top: 0; padding-bottom: 0; }
    .pv-sm-1 { padding-top: 1rem; padding-bottom: 1rem; }
    .pv-sm-2 { padding-top: 2rem; padding-bottom: 2rem; }
    .pv-sm-3 { padding-top: 3rem; padding-bottom: 3rem; }
    .pv-sm-4 { padding-top: 4rem; padding-bottom: 4rem; }
    .pv-sm-5 { padding-top: 5rem; padding-bottom: 5rem; }
    .pv-sm-6 { padding-top: 6rem; padding-bottom: 6rem; }
    .pv-sm-7 { padding-top: 7rem; padding-bottom: 7rem; }
    .pv-sm-8 { padding-top: 8rem; padding-bottom: 8rem; }
    .pv-sm-9 { padding-top: 9rem; padding-bottom: 9rem; }
    .pv-sm-10 { padding-top: 10rem; padding-bottom: 10rem; }
    .pv-sm-11 { padding-top: 11rem; padding-bottom: 11rem; }
    .pv-sm-12 { padding-top: 12rem; padding-bottom: 12rem; }

    .mb-sm-0 { margin-bottom: 0; }
    .mb-sm-1 { margin-bottom: 1rem; }
    .mb-sm-2 { margin-bottom: 2rem; }
    .mb-sm-3 { margin-bottom: 3rem; }
    .mb-sm-4 { margin-bottom: 4rem; }
    .mb-sm-5 { margin-bottom: 5rem; }
    .mb-sm-6 { margin-bottom: 6rem; }
    .mb-sm-7 { margin-bottom: 7rem; }
    .mb-sm-8 { margin-bottom: 8rem; }
    .mb-sm-9 { margin-bottom: 9rem; }
    .mb-sm-10 { margin-bottom: 10rem; }
    .mb-sm-11 { margin-bottom: 11rem; }
    .mb-sm-12 { margin-bottom: 12rem; }

}

@media #{$screen-md}{

    // horizontal padding
    .ph-md-0 { padding-left: 0; padding-right: 0; }
    .ph-md-1 { padding-right: 1rem; padding-left: 1rem; }
    .ph-md-2 { padding-right: 2rem; padding-left: 2rem; }
    .ph-md-3 { padding-right: 3rem; padding-left: 3rem; }
    .ph-md-4 { padding-right: 4rem; padding-left: 4rem; }
    .ph-md-5 { padding-right: 5rem; padding-left: 5rem; }
    .ph-md-6 { padding-left: 6rem; padding-right: 6rem; }
    .ph-md-7 { padding-right: 7rem; padding-left: 7rem; }
    .ph-md-8 { padding-right: 8rem; padding-left: 8rem; }
    .ph-md-9 { padding-right: 9rem; padding-left: 9rem; }
    .ph-md-10 { padding-right: 10rem; padding-left: 10rem; }
    .ph-md-11 { padding-right: 11rem; padding-left: 11rem; }
    .ph-md-12 { padding-right: 12rem; padding-left: 12rem; }

    // vertical padding.pv-md-0 { padding-top: 0; padding-bottom: 0; }
    .pv-md-1 { padding-top: 1rem; padding-bottom: 1rem; }
    .pv-md-2 { padding-top: 2rem; padding-bottom: 2rem; }
    .pv-md-3 { padding-top: 3rem; padding-bottom: 3rem; }
    .pv-md-4 { padding-top: 4rem; padding-bottom: 4rem; }
    .pv-md-5 { padding-top: 5rem; padding-bottom: 5rem; }
    .pv-md-6 { padding-top: 6rem; padding-bottom: 6rem; }
    .pv-md-7 { padding-top: 7rem; padding-bottom: 7rem; }
    .pv-md-8 { padding-top: 8rem; padding-bottom: 8rem; }
    .pv-md-9 { padding-top: 9rem; padding-bottom: 9rem; }
    .pv-md-10 { padding-top: 10rem; padding-bottom: 10rem; }
    .pv-md-11 { padding-top: 11rem; padding-bottom: 11rem; }
    .pv-md-12 { padding-top: 12rem; padding-bottom: 12rem; }

    .mb-md-0 { margin-bottom: 0; }
    .mb-md-1 { margin-bottom: 1rem; }
    .mb-md-2 { margin-bottom: 2rem; }
    .mb-md-3 { margin-bottom: 3rem; }
    .mb-md-4 { margin-bottom: 4rem; }
    .mb-md-5 { margin-bottom: 5rem; }
    .mb-md-6 { margin-bottom: 6rem; }
    .mb-md-7 { margin-bottom: 7rem; }
    .mb-md-8 { margin-bottom: 8rem; }
    .mb-md-9 { margin-bottom: 9rem; }
    .mb-md-10 { margin-bottom: 10rem; }
    .mb-md-11 { margin-bottom: 11rem; }
    .mb-md-12 { margin-bottom: 12rem; }

}

@media #{$screen-lg}{

    // horizontal padding
    .ph-lg-0 { padding-right: 0; padding-left: 0; }
    .ph-lg-1 { padding-right: 1rem; padding-left: 1rem; }
    .ph-lg-2 { padding-right: 2rem; padding-left: 2rem; }
    .ph-lg-3 { padding-right: 3rem; padding-left: 3rem; }
    .ph-lg-4 { padding-right: 4rem; padding-left: 4rem; }
    .ph-lg-5 { padding-right: 5rem; padding-left: 5rem; }
    .ph-lg-6 { padding-left: 6rem; padding-right: 6rem; }
    .ph-lg-7 { padding-right: 7rem; padding-left: 7rem; }
    .ph-lg-8 { padding-right: 8rem; padding-left: 8rem; }
    .ph-lg-9 { padding-right: 9rem; padding-left: 9rem; }
    .ph-lg-10 { padding-right: 10rem; padding-left: 10rem; }
    .ph-lg-11 { padding-right: 11rem; padding-left: 11rem; }
    .ph-lg-12 { padding-right: 12rem; padding-left: 12rem; }

    // vertical padding
    .pv-lg-0 { padding-top: 0; padding-bottom: 0; }
    .pv-lg-1 { padding-top: 1rem; padding-bottom: 1rem; }
    .pv-lg-2 { padding-top: 2rem; padding-bottom: 2rem; }
    .pv-lg-3 { padding-top: 3rem; padding-bottom: 3rem; }
    .pv-lg-4 { padding-top: 4rem; padding-bottom: 4rem; }
    .pv-lg-5 { padding-top: 5rem; padding-bottom: 5rem; }
    .pv-lg-6 { padding-top: 6rem; padding-bottom: 6rem; }
    .pv-lg-7 { padding-top: 7rem; padding-bottom: 7rem; }
    .pv-lg-8 { padding-top: 8rem; padding-bottom: 8rem; }
    .pv-lg-9 { padding-top: 9rem; padding-bottom: 9rem; }
    .pv-lg-10 { padding-top: 10rem; padding-bottom: 10rem; }
    .pv-lg-11 { padding-top: 11rem; padding-bottom: 11rem; }
    .pv-lg-12 { padding-top: 12rem; padding-bottom: 12rem; }

    .mb-lg-0 { margin-bottom: 0; }
    .mb-lg-1 { margin-bottom: 1rem; }
    .mb-lg-2 { margin-bottom: 2rem; }
    .mb-lg-3 { margin-bottom: 3rem; }
    .mb-lg-4 { margin-bottom: 4rem; }
    .mb-lg-5 { margin-bottom: 5rem; }
    .mb-lg-6 { margin-bottom: 6rem; }
    .mb-lg-7 { margin-bottom: 7rem; }
    .mb-lg-8 { margin-bottom: 8rem; }
    .mb-lg-9 { margin-bottom: 9rem; }
    .mb-lg-10 { margin-bottom: 10rem; }
    .mb-lg-11 { margin-bottom: 11rem; }
    .mb-lg-12 { margin-bottom: 12rem; }
}