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

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

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

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

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

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

@media screen and (min-width: 992px) {
  .margin-left-right-l    { margin-left: var(--size-l); margin-right: var(--size-l); }
  .margin-left-right-xl   { margin-left: var(--size-xl); margin-right: var(--size-xl); }
  .margin-left-right-xxl  { margin-left: var(--size-xxl); margin-right: var(--size-xxl); }
  .margin-left-right-3xl { margin-left: var(--size-3xl); margin-right: var(--size-3xl); }
  .margin-left-right-4xl { margin-left: var(--size-4xl); margin-right: var(--size-4xl); }
}

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

.row-gap-none { row-gap: 0; }
.row-gap-xs   { row-gap: var(--size-xs); }
.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); }
.row-gap-3xl  { row-gap: var(--size-3xl); }
.row-gap-4xl  { row-gap: var(--size-4xl); }

.gap-none  { gap: 0; }
.gap-xs   { gap: var(--size-xs); }
.gap-s, .gap-m, .gap-l, .gap-xl, .gap-xxl, .gap-3xl, .gap-4xl { gap: var(--size-s); }

@media screen and (min-width: 992px) {
    .gap-m    { gap: var(--size-m); }
    .gap-l    { gap: var(--size-l); }
    .gap-xl   { gap: var(--size-xl); }
    .gap-xxl  { gap: var(--size-xxl); }
    .gap-3xl  { gap: var(--size-3xl); }
    .gap-4xl  { gap: var(--size-4xl); }
}


.flex-direction-column { flex-direction: column; }
.flex-direction-row { 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-center { justify-content: center; }
.justify-content-flex-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; }

.padding-top-none  { padding-top: 0; }
.padding-top-s     { padding-top: var(--size-s); }
.padding-top-m     { padding-top: var(--size-m); }
.padding-top-l     { padding-top: var(--size-l); }
.padding-top-xl    { padding-top: var(--size-xl); }
.padding-top-xxl   { padding-top: var(--size-xxl); }
.padding-top-3xl   { padding-top: var(--size-3xl); }
.padding-top-4xl   { padding-top: var(--size-4xl); }

.padding-bottom-none  { padding-bottom: 0; }
.padding-bottom-s     { padding-bottom: var(--size-s); }
.padding-bottom-m     { padding-bottom: var(--size-m); }
.padding-bottom-l     { padding-bottom: var(--size-l); }
.padding-bottom-xl    { padding-bottom: var(--size-xl); }
.padding-bottom-xxl   { padding-bottom: var(--size-xxl); }
.padding-bottom-3xl   { padding-bottom: var(--size-3xl); }
.padding-bottom-4xl   { padding-bottom: var(--size-4xl); }


.padding-left-none  { padding-left: 0; }
.padding-left-s     { padding-left: var(--size-s); }
.padding-left-m     { padding-left: var(--size-m); }
.padding-left-l     { padding-left: var(--size-l); }
.padding-left-xl    { padding-left: var(--size-xl); }
.padding-left-xxl   { padding-left: var(--size-xxl); }
.padding-left-3xl   { padding-left: var(--size-3xl); }
.padding-left-4xl   { padding-left: var(--size-4xl); }

.padding-right-none  { padding-right: 0; }
.padding-right-s     { padding-right: var(--size-s); }
.padding-right-m     { padding-right: var(--size-m); }
.padding-right-l     { padding-right: var(--size-l); }
.padding-right-xl    { padding-right: var(--size-xl); }
.padding-right-xxl   { padding-right: var(--size-xxl); }
.padding-right-3xl   { padding-right: var(--size-3xl); }
.padding-right-4xl   { padding-right: var(--size-4xl); }

.padding-left-right-none { padding-left: 0; padding-right: 0; }
.padding-left-right-s { padding-left: var(--size-s); padding-right: var(--size-s); }
.padding-left-right-m, .padding-left-right-l, .padding-left-right-xl, .padding-left-right-xxl, .padding-left-right-3xl, .padding-left-right-4xl { padding-left: var(--size-m); padding-right: var(--size-m); }

@media screen and (min-width: 992px) {
    .padding-left-right-l    { padding-left: var(--size-l); padding-right: var(--size-l); }
    .padding-left-right-xl   { padding-left: var(--size-xl); padding-right: var(--size-xl); }
    .padding-left-right-xxl  { padding-left: var(--size-xxl); padding-right: var(--size-xxl); }
    .padding-left-right-3xl { padding-left: var(--size-3xl); padding-right: var(--size-3xl); }
    .padding-left-right-4xl { padding-left: var(--size-4xl); padding-right: var(--size-4xl); }
}

/* List Styles */
.list-style-bullets li { list-style-type: disc; list-style-position: inside; }
.list-style-hyphens li { list-style-type: none; }
.list-style-hyphens li::before { content: "- "; display: inline-block; width: 1em; }
.list-style-numbers li { list-style-type: decimal; list-style-position: inside; }
.list-style-letters li { list-style-type: lower-alpha; list-style-position: inside; }
.list-style-none li { list-style-type: none; }
/* .list-block li { padding-left: 0.2em; } */

/* Corners for images */
.image-corners-rounded { border-radius: var(--size-s); overflow: hidden;}
.image-corners-circle { border-radius: 50%; object-fit: cover; overflow: hidden;}

/* Corners for videos */
.video-corners-rounded { border-radius: var(--size-s); }
.video-corners-circle  { border-radius: 50%; }

.align-center { margin-left: auto; margin-right: auto; }
.align-left { margin-left: 0; margin-right: auto; }
.align-right { margin-left: auto; margin-right: 0; }

.font-size-xs  { font-size: var(--size-xs); }
.font-size-s   { font-size: var(--size-s); }
.font-size-sm  { font-size: var(--size-s); }
.font-size-m   { font-size: var(--size-m); }
.font-size-ml  { font-size: var(--size-ml); }
.font-size-l   { font-size: var(--size-l); }
.font-size-xl  { font-size: var(--size-l); }
.font-size-xxl { font-size: var(--size-l); }
.font-size-3xl { font-size: var(--size-l); }
.font-size-4xl { font-size: var(--size-l); }

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