.no-margin { margin: 0; }
.no-padding { padding: 0; }

/* Bottom margin */
.margin-bottom1{
    margin-bottom: var(--s-1);
}
.margin-bottom2{
    margin-bottom: var(--s-2);
}
.margin-bottom3{
    margin-bottom: var(--s-3);
}
.margin-bottom4{
    margin-bottom: var(--s-4);
}
.margin-bottom5{
    margin-bottom: var(--s-5);
}

/* Top margin */
.margin-top1{
    margin-top: var(--s-1);
}
.margin-top2{
    margin-top: var(--s-2);
}
.margin-top3{
    margin-top: var(--s-3);
}
.margin-top4{
    margin-top: var(--s-4);
}
.margin-top5{
    margin-top: var(--s-5);
}

/* Horizontal margin */
.margin-hor1{
    margin-left: var(--s-1);
    margin-right: var(--s-1);
}
.margin-hor2{
    margin-left: var(--s-2);
    margin-right: var(--s-2);
}
.margin-hor3{
    margin-left: var(--s-3);
    margin-right: var(--s-3);
}
.margin-hor4{
    margin-left: var(--s-4);
    margin-right: var(--s-4);
}
.margin-hor5{
    margin-left: var(--s-5);
    margin-right: var(--s-5);
}

/* Vertical margin */
.margin-ver1{
    margin-top: var(--s-1);
    margin-bottom: var(--s-1);
}
.margin-ver2{
    margin-top: var(--s-2);
    margin-bottom: var(--s-2);
}
.margin-ver3{
    margin-top: var(--s-3);
    margin-bottom: var(--s-3);
}
.margin-ver4{
    margin-top: var(--s-4);
    margin-bottom: var(--s-4);
}
.margin-ver5{
    margin-top: var(--s-5);
    margin-bottom: var(--s-5);
}

/* Bottom padding */
.padding-bottom1{
    padding-bottom: var(--s-1);
}
.padding-bottom2{
    padding-bottom: var(--s-2);
}
.padding-bottom3{
    padding-bottom: var(--s-3);
}
.padding-bottom4{
    padding-bottom: var(--s-4);
}
.padding-bottom5{
    padding-bottom: var(--s-5);
}

/* Top padding */
.padding-top1{
    padding-top: var(--s-1);
}
.padding-top2{
    padding-top: var(--s-2);
}
.padding-top3{
    padding-top: var(--s-3);
}
.padding-top4{
    padding-top: var(--s-4);
}
.padding-top5{
    padding-top: var(--s-5);
}

/* Horizontal padding */
.padding-hor1{
    padding-left: var(--s-1);
    padding-right: var(--s-1);
}
.padding-hor2{
    padding-left: var(--s-2);
    padding-right: var(--s-2);
}
.padding-hor3{
    padding-left: var(--s-3);
    padding-right: var(--s-3);
}
.padding-hor4{
    padding-left: var(--s-4);
    padding-right: var(--s-4);
}
.padding-hor5{
    padding-left: var(--s-5);
    padding-right: var(--s-5);
}

/* Vertical padding */
.padding-ver1{
    padding-top: var(--s-1);
    padding-bottom: var(--s-1);
}
.padding-ver2{
    padding-top: var(--s-2);
    padding-bottom: var(--s-2);
}
.padding-ver3{
    padding-top: var(--s-3);
    padding-bottom: var(--s-3);
}
.padding-ver4{
    padding-top: var(--s-4);
    padding-bottom: var(--s-4);
}
.padding-ver5{
    padding-top: var(--s-5);
    padding-bottom: var(--s-5);
}