/* margin */
.m--2 {
    margin: 8px;
}

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

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

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

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

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

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

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

/* margin-left */
.ml--1 {
    margin-left: 4px;
}

.ml--2 {
    margin-left: 8px;
}

.ml--4 {
    margin-left: 16px;
}

/* margin-bottom */
.mb--4 {
    margin-bottom: 16px;
}

/* vertical margin */
.my--4 {
    margin-top: 16px;
    margin-bottom: 16px;
}

.my--6 {
    margin-top: 24px;
    margin-bottom: 24px;
}

/* padding */
.p--2 {
    padding: 8px;
}

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

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

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

/* vertical padding */
.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--8 {
    padding-top: 32px;
    padding-bottom: 32px;
}

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

/* horizontal padding */
.px--4 {
    padding-left: 16px;
    padding-right: 16px;
}

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

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

@media screen and (min-width: 720px) {
    .px--12\@md {
        padding-left: 48px;
        padding-right: 48px;
    }

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

    .my--12\@md {
        margin-top: 48px;
        margin-bottom: 48px;
    }
}

@media screen and (max-width: 720px) {
    .mt--4\@md-down {
        margin-top: 16px;
    }
}