.font-size-s   { font-size: var(--size-s); }
.font-size-m   { font-size: var(--size-m); }
.font-size-l   { font-size: var(--size-l); }
.font-size-xl  { font-size: var(--size-l); }
.font-size-xxl { font-size: var(--size-l); }

@media screen and (min-width: 992px) {
    .font-size-xl  { font-size: var(--size-xl); }
    .font-size-xxl { font-size: var(--size-xxl); }
}

.align-left   { text-align: left; }
.align-center { text-align: center; }
.align-right  { text-align: right; }

.text-align-left   { text-align: left; }
.text-align-center { text-align: center; }
.text-align-right  { text-align: right; }

.space-top-none  { margin-top: 0; }
.space-top-s     { margin-top: var(--size-s); }
.space-top-m     { margin-top: var(--size-m); }
.space-top-l     { margin-top: var(--size-l); }
.space-top-xl    { margin-top: var(--size-xl); }
.space-top-xxl   { margin-top: var(--size-xxl); }

.space-bottom-none  { margin-bottom: 0; }
.space-bottom-s     { margin-bottom: var(--size-s); }
.space-bottom-m     { margin-bottom: var(--size-m); }
.space-bottom-l     { margin-bottom: var(--size-l); }
.space-bottom-xl    { margin-bottom: var(--size-xl); }
.space-bottom-xxl   { margin-bottom: var(--size-xxl); }

.space-left-none  { margin-left: 0; }
.space-left-s     { margin-left: var(--size-s); }
.space-left-m     { margin-left: var(--size-m); }
.space-left-l     { margin-left: var(--size-l); }
.space-left-xl    { margin-left: var(--size-xl); }
.space-left-xxl   { margin-left: var(--size-xxl); }

.space-right-none  { margin-right: 0; }
.space-right-s     { margin-right: var(--size-s); }
.space-right-m     { margin-right: var(--size-m); }
.space-right-l     { margin-right: var(--size-l); }
.space-right-xl    { margin-right: var(--size-xl); }
.space-right-xxl   { margin-right: var(--size-xxl); }

.space-sides-none { margin-left: 0; margin-right: 0; }
.space-sides-s    { margin-left: var(--size-s); margin-right: var(--size-s); }
.space-sides-m    { margin-left: var(--size-m); margin-right: var(--size-m); }
.space-sides-l    { margin-left: var(--size-l); margin-right: var(--size-l); }
.space-sides-xl   { margin-left: var(--size-xl); margin-right: var(--size-xl); }
.space-sides-xxl  { margin-left: var(--size-xxl); margin-right: var(--size-xxl); }

.col-gap-none { column-gap: 0; }
.col-gap-s    { column-gap: var(--size-s); }
.col-gap-m    { column-gap: var(--size-m); }
.col-gap-l    { column-gap: var(--size-l); }
.col-gap-xl   { column-gap: var(--size-xl); }
.col-gap-xxl  { column-gap: var(--size-xxl); }

.row-gap-none { row-gap: 0; }
.row-gap-s    { row-gap: var(--size-s); }
.row-gap-m    { row-gap: var(--size-m); }
.row-gap-l    { row-gap: var(--size-l); }
.row-gap-xl   { row-gap: var(--size-xl); }
.row-gap-xxl  { row-gap: var(--size-xxl); }

.list-block { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; }
.list-vertical { flex-direction: column; }
.list-horizontal { flex-direction: row; }

.align-items-start { align-items: start; }
.align-items-center { align-items: center; }
.align-items-end { align-items: end; }
.align-items-stretch { align-items: stretch; }

.justify-content-flex-start { justify-content: flex-start; }
.justify-content-flex-center { justify-content: center; }
.justify-content-end { justify-content: flex-end; }
.justify-content-space-between { justify-content: space-between; }
.justify-content-space-around { justify-content: space-around; }
.justify-content-space-evenly { justify-content: space-evenly; }