:root {
    --spacer: 1rem
}

.my-3 {
    margin-top: var(--spacer);
    margin-bottom: var(--spacer);
}

.my-4 {
    margin-top: calc(var(--spacer) * 1.5);
    margin-bottom: calc(var(--spacer) * 1.5);
}

.my-5 {
    margin-top: calc(var(--spacer) * 3);
    margin-bottom: calc(var(--spacer) * 3);
}

.mt-2 {
    margin-top: calc(var(--spacer) * .5);
}

.mt-3 {
    margin-top: var(--spacer);
}

.mb-3 {
    margin-bottom: var(--spacer);
}

.mb-5 {
    margin-bottom: calc(var(--spacer) * 3);
}

.ml-1 {
    margin-left: calc(var(--spacer) * .25);
}

.ml-2 {
    margin-left: calc(var(--spacer) * .5);
}

.ml-3 {
    margin-left: var(--spacer);
}

.ml-4 {
    margin-left: calc(var(--spacer) * 1.5);
}

.mr-1 {
    margin-right: calc(var(--spacer) * .25);
}

.py-3 {
    padding-top: var(--spacer);
    padding-bottom: var(--spacer);
}

.pl-3 {
    padding-left: var(--spacer);
}

.pr-3 {
    padding-right: var(--spacer);
}