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

.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-xxs   { margin-bottom: var(--size-xxs); }
.margin-bottom-xs    { margin-bottom: var(--size-xs); }
.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-xxs   { row-gap: var(--size-xxs); }
.row-gap-xs   { row-gap: var(--size-xs); }
.row-gap-s, .row-gap-m, .row-gap-l, .row-gap-xl, .row-gap-xxl, .row-gap-3xl, .row-gap-4xl { row-gap: var(--size-s); }

@media screen and (min-width: 992px) {
    .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 and videos */
.corners-rounded { border-radius: var(--size-s); }
.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; }

/* Ensure a tags behave like buttons */
.btn,
button {
    all: unset; /* reset browser styles */
    display: inline-flex;   /* shrink to content */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    width: auto;            /* prevent full width */
    max-width: max-content; /* ensure button fits content */
    box-sizing: border-box; /* include padding/border in size */
    color: var(--btn-color);
    background-color: var(--btn-background-color);
    border: 1px solid var(--btn-border-color);
    border-radius: var(--btn-border-radius);
    padding: var(--btn-padding);
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-primary);
    letter-spacing: var(--letter-spacing-primary);
}

/* Hover state */
.btn:hover,
button:hover {
    color: var(--btn-hover-color);
    background-color: var(--btn-hover-background-color);
    border-color: var(--btn-hover-border-color);
}

.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); }

@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); }
}

figure.image.has-border {
  border: 1px solid var(--image-border-color, currentColor);
}


/* Divider */

.line {
  border: 0;
  width: var(--line-width, 100%);
  border-top-style: var(--line-style, solid);
  border-top-width: var(--line-thickness, 1px);
  border-top-color: var(--line-color, var(--color-primary));
}

/* style variants */

.line-style-solid {  --line-style: solid;  }
.line-style-dashed {  --line-style: dashed;  }
.line-style-dotted {  --line-style: dotted;  }

.block-full-bleed{
    padding-left: 0!important;
    padding-right: 0!important;
}