/* Base (XS / default) — small devices */
.vmx-1 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.vmt-1 {
    margin-top: 2rem;
}

.vmb-1 {
    margin-bottom: 2rem;
}

.vmx-2 {
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.vmt-2 {
    margin-top: 4rem;
}

.vmb-2 {
    margin-bottom: 4rem;
}

.vmx-3 {
    margin-top: 5rem;
    margin-bottom: 5rem;
}

.vmt-3 {
    margin-top: 5rem;
}

.vmb-3 {
    margin-bottom: 5rem;
}


/* SM (>576px) */
@media (min-width: 576px) {
    .vmx-1 {
        margin-top: 2.5rem;
        margin-bottom: 2.5rem;
    }

    .vmt-1 {
        margin-top: 2.5rem;
    }

    .vmb-1 {
        margin-bottom: 2.5rem;
    }

    .vmx-2 {
        margin-top: 5rem;
        margin-bottom: 5rem;
    }

    .vmt-2 {
        margin-top: 5rem;
    }

    .vmb-2 {
        margin-bottom: 5rem;
    }

    .vmx-3 {
        margin-top: 6rem;
        margin-bottom: 6rem;
    }

    .vmt-3 {
        margin-top: 6rem;
    }

    .vmb-3 {
        margin-bottom: 6rem;
    }
}

/* MD (>768px) */
@media (min-width: 768px) {
    .vmx-1 {
        margin-top: 3rem;
        margin-bottom: 3rem;
    }

    .vmt-1 {
        margin-top: 3rem;
    }

    .vmb-1 {
        margin-bottom: 3rem;
    }

    .vmx-2 {
        margin-top: 6rem;
        margin-bottom: 6rem;
    }

    .vmt-2 {
        margin-top: 6rem;
    }

    .vmb-2 {
        margin-bottom: 6rem;
    }

    .vmx-3 {
        margin-top: 8rem;
        margin-bottom: 8rem;
    }

    .vmt-3 {
        margin-top: 8rem;
    }

    .vmb-3 {
        margin-bottom: 8rem;
    }
}

/* LG (>992px) */
@media (min-width: 992px) {
    .vmx-1 {
        margin-top: 3.5rem;
        margin-bottom: 3.5rem;
    }

    .vmt-1 {
        margin-top: 3.5rem;
    }

    .vmb-1 {
        margin-bottom: 3.5rem;
    }

    .vmx-2 {
        margin-top: 7rem;
        margin-bottom: 7rem;
    }

    .vmt-2 {
        margin-top: 7rem;
    }

    .vmb-2 {
        margin-bottom: 7rem;
    }

    .vmx-3 {
        margin-top: 9rem;
        margin-bottom: 9rem;
    }

    .vmt-3 {
        margin-top: 9rem;
    }

    .vmb-3 {
        margin-bottom: 9rem;
    }
}

/* XL && XXL  */
@media (min-width: 1200px) {
    .vmx-1 {
        margin-top: 4.5rem;
        margin-bottom: 4.5rem;
    }

    .vmt-1 {
        margin-top: 4.5rem;
    }

    .vmb-1 {
        margin-bottom: 4.5rem;
    }

    .vmx-2 {
        margin-top: 9rem;
        margin-bottom: 9rem;
    }

    .vmt-2 {
        margin-top: 9rem;
    }

    .vmb-2 {
        margin-bottom: 9rem;
    }

    .vmx-3 {
        margin-top: 11rem;
        margin-bottom: 11rem;
    }

    .vmt-3 {
        margin-top: 11rem;
    }

    .vmb-3 {
        margin-bottom: 11rem;
    }
}


/* Base (XS / default) — small devices */
.vpx-1 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.vpt-1 {
    padding-top: 2rem;
}

.vpb-1 {
    padding-bottom: 2rem;
}

.vpx-2 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.vpt-2 {
    padding-top: 4rem;
}

.vpb-2 {
    padding-bottom: 4rem;
}

.vpx-3 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.vpt-3 {
    padding-top: 5rem;
}

.vpb-3 {
    padding-bottom: 5rem;
}


/* SM (>576px) */
@media (min-width: 576px) {
    .vpx-1 {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .vpt-1 {
        padding-top: 2.5rem;
    }

    .vpb-1 {
        padding-bottom: 2.5rem;
    }

    .vpx-2 {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .vpt-2 {
        padding-top: 5rem;
    }

    .vpb-2 {
        padding-bottom: 5rem;
    }

    .vpx-3 {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }

    .vpt-3 {
        padding-top: 6rem;
    }

    .vpb-3 {
        padding-bottom: 6rem;
    }
}

/* MD (>768px) */
@media (min-width: 768px) {
    .vpx-1 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .vpt-1 {
        padding-top: 3rem;
    }

    .vpb-1 {
        padding-bottom: 3rem;
    }

    .vpx-2 {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }

    .vpt-2 {
        padding-top: 6rem;
    }

    .vpb-2 {
        padding-bottom: 6rem;
    }

    .vpx-3 {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }

    .vpt-3 {
        padding-top: 8rem;
    }

    .vpb-3 {
        padding-bottom: 8rem;
    }
}

/* LG (>992px) */
@media (min-width: 992px) {
    .vpx-1 {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    .vpt-1 {
        padding-top: 3.5rem;
    }

    .vpb-1 {
        padding-bottom: 3.5rem;
    }

    .vpx-2 {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }

    .vpt-2 {
        padding-top: 7rem;
    }

    .vpb-2 {
        padding-bottom: 7rem;
    }

    .vpx-3 {
        padding-top: 9rem;
        padding-bottom: 9rem;
    }

    .vpt-3 {
        padding-top: 9rem;
    }

    .vpb-3 {
        padding-bottom: 9rem;
    }
}

/* XL && XXL  */
@media (min-width: 1200px) {
    .vpx-1 {
        padding-top: 4.5rem;
        padding-bottom: 4.5rem;
    }

    .vpt-1 {
        padding-top: 4.5rem;
    }

    .vpb-1 {
        padding-bottom: 4.5rem;
    }

    .vpx-2 {
        padding-top: 9rem;
        padding-bottom: 9rem;
    }

    .vpt-2 {
        padding-top: 9rem;
    }

    .vpb-2 {
        padding-bottom: 9rem;
    }

    .vpx-3 {
        padding-top: 11rem;
        padding-bottom: 11rem;
    }

    .vpt-3 {
        padding-top: 11rem;
    }

    .vpb-3 {
        padding-bottom: 11rem;
    }
}