/* Touch / Vendor Prefix ===== */
/* Prevent Safari browser from converting phone number text into a link. */
.webkit-touch-callout--none { -webkit-touch-callout: none; }

/* Alignment ===================== */
.align-content--center { align-content: center; }
.align-content--flex-end { align-content: flex-end; }
.align-content--flex-start { align-content: flex-start; }
.align-content--space-around { align-content: space-around; }
.align-content--space-between { align-content: space-between; }
.align-content--space-evenly { align-content: space-evenly; }
.align-content--stretch { align-content: stretch; }

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

.align-self--auto { align-self: auto; }
.align-self--baseline { align-self: baseline; }
.align-self--center { align-self: center; }
.align-self--flex-end { align-self: flex-end; }
.align-self--flex-start { align-self: flex-start; }
.align-self--stretch { align-self: stretch; }

/* Aspect Ratio ===================== */
.aspect-ratio--1-1 { aspect-ratio: 1 / 1; }
.aspect-ratio--16-10 { aspect-ratio: 16 / 10; }
.aspect-ratio--16-9 { aspect-ratio: 16 / 9; }
.aspect-ratio--21-9 { aspect-ratio: 21 / 9; }
.aspect-ratio--3-2 { aspect-ratio: 3 / 2; }
.aspect-ratio--4-3 { aspect-ratio: 4 / 3; }
.aspect-ratio--auto { aspect-ratio: auto; }

/* Backface / Visibility ===================== */
.backface-visibility--hidden { backface-visibility: hidden; }
.backface-visibility--visible { backface-visibility: visible; }

/* Background ===================== */
.background-attachment--fixed { background-attachment: fixed; }
.background-attachment--local { background-attachment: local; }
.background-attachment--scroll { background-attachment: scroll; }

.background-clip--border-box { background-clip: border-box; }
.background-clip--content-box { background-clip: content-box; }
.background-clip--padding-box { background-clip: padding-box; }

.background-color--black { background-color: black; }
.background-color--white { background-color: white; }
.background-color--transparent { background-color: transparent; }
.background-color--current { background-color: currentColor; }

.background-position--center { background-position: center; }
.background-position--top { background-position: top; }
.background-position--right { background-position: right; }
.background-position--bottom { background-position: bottom; }
.background-position--left { background-position: left; }

.background-repeat--no-repeat { background-repeat: no-repeat; }
.background-repeat--repeat { background-repeat: repeat; }
.background-repeat--repeat-x { background-repeat: repeat-x; }
.background-repeat--repeat-y { background-repeat: repeat-y; }
.background-repeat--space { background-repeat: space; }
.background-repeat--round { background-repeat: round; }

.background-size--auto { background-size: auto; }
.background-size--contain { background-size: contain; }
.background-size--cover { background-size: cover; }

/* Border ===================== */
.border--0 { border: 0 !important; }
.border--none { border: none !important; }
.border--solid { border-style: solid; }
.border--dashed { border-style: dashed; }
.border--dotted { border-style: dotted; }
.border--double { border-style: double; }
.border--hidden { border-style: hidden; }

.border-color--current { border-color: currentColor; }
.border-color--transparent { border-color: transparent; }
.border-color--black { border-color: black; }
.border-color--white { border-color: white; }

.border-radius--0 { border-radius: 0 !important; }
.border-radius--2px { border-radius: 2px; }
.border-radius--4px { border-radius: 4px; }
.border-radius--8px { border-radius: 8px; }
.border-radius--9999px { border-radius: 9999px; } /* pill/full */

.border-width--0 { border-width: 0 !important; }
.border-width--1px { border-width: 1px; }
.border-width--2px { border-width: 2px; }
.border-width--4px { border-width: 4px; }

/* Box Sizing ===================== */
.box-sizing--border-box { box-sizing: border-box; }
.box-sizing--content-box { box-sizing: content-box; }

/* Breaks (kept and expanded) ===================== */
.break-after--always { page-break-after: always; break-after: page; }
.break-after--auto { break-after: auto; }
.break-after--avoid { break-after: avoid; }
.break-after--avoid-page { break-after: avoid-page; }
.break-after--left { break-after: left; }
.break-after--right { break-after: right; }

.break-before--always { page-break-before: always; break-before: page; }
.break-before--auto { break-before: auto; }
.break-before--avoid { break-before: avoid; }
.break-before--avoid-page { break-before: avoid-page; }
.break-before--left { break-before: left; }
.break-before--right { break-before: right; }

.break-inside--always { break-inside: always; }
.break-inside--auto { break-inside: auto; }
.break-inside--avoid { break-inside: avoid; }
.break-inside--avoid-page { break-inside: avoid-page; }

/* Clear / Float ===================== */
.clear--both { clear: both; }
.clear--left { clear: left; }
.clear--none { clear: none; }
.clear--right { clear: right; }

.float--left { float: left; }
.float--none { float: none; }
.float--right { float: right; }

/* Color & Opacity ===================== */
.color--black { color: black; }
.color--white { color: white; }
.color--current { color: currentColor; }
.color--inherit { color: inherit; }
.color--transparent { color: transparent; }

.opacity--0 { opacity: 0; }
.opacity--0-25 { opacity: 0.25; }
.opacity--0-5 { opacity: 0.5; }
.opacity--0-75 { opacity: 0.75; }
.opacity--1 { opacity: 1; }

/* Column (Multi-col) ===================== */
.column-count--1 { column-count: 1; }
.column-count--2 { column-count: 2; }
.column-count--3 { column-count: 3; }
.column-count--auto { column-count: auto; }

.column-gap--0 { column-gap: 0; }
.column-gap--8px { column-gap: 8px; }
.column-gap--16px { column-gap: 16px; }
.column-gap--24px { column-gap: 24px; }
.column-gap--32px { column-gap: 32px; }

.column-fill--auto { column-fill: auto; }
.column-fill--balance { column-fill: balance; }

/* Content / Cursor ===================== */
.content--none { content: none; }
.cursor--auto { cursor: auto; }
.cursor--default { cursor: default; }
.cursor--grab { cursor: grab; }
.cursor--grabbing { cursor: grabbing; }
.cursor--help { cursor: help; }
.cursor--move { cursor: move; }
.cursor--not-allowed { cursor: not-allowed; }
.cursor--pointer { cursor: pointer; }
.cursor--progress { cursor: progress; }
.cursor--text { cursor: text; }
.cursor--wait { cursor: wait; }

/* Display (kept and expanded) ===================== */
.display--block { display: block; }
.display--contents { display: contents; }
.display--flex { display: flex; }
.display--flow-root { display: flow-root; }
.display--grid { display: grid; }
.display--inline { display: inline; }
.display--inline-block { display: inline-block; }
.display--inline-flex { display: inline-flex; }
.display--inline-grid { display: inline-grid; }
.display--list-item { display: list-item; }
.display--none { display: none !important; }
.display--table { display: table; }

/* Filter (basic) ===================== */
.filter--none { filter: none; }
.filter--grayscale-25 { filter: grayscale(25%); }
.filter--grayscale-50 { filter: grayscale(50%); }
.filter--grayscale-75 { filter: grayscale(75%); }
.filter--grayscale-100 { filter: grayscale(100%); }
.filter--blur-4px { filter: blur(4px); }

/* Flexbox ===================== */
.flex--1 { flex: 1 1 0%; }
.flex--auto { flex: 1 1 auto; }
.flex--initial { flex: 0 1 auto; }
.flex--none { flex: none; }

.flex-basis--0 { flex-basis: 0; }
.flex-basis--auto { flex-basis: auto; }
.flex-basis--content { flex-basis: content; }

.flex-direction--column { flex-direction: column; }
.flex-direction--column-reverse { flex-direction: column-reverse; }
.flex-direction--row { flex-direction: row; }
.flex-direction--row-reverse { flex-direction: row-reverse; }

.flex-grow--0 { flex-grow: 0; }
.flex-grow--1 { flex-grow: 1; }

.flex-shrink--0 { flex-shrink: 0; }
.flex-shrink--1 { flex-shrink: 1; }

.flex-wrap--nowrap { flex-wrap: nowrap; }
.flex-wrap--wrap { flex-wrap: wrap; }
.flex-wrap--wrap-reverse { flex-wrap: wrap-reverse; }

/* Gap ===================== */
.gap--0 { gap: 0; }
.gap--8px { gap: 8px; }
.gap--16px { gap: 16px; }
.gap--24px { gap: 24px; }
.gap--32px { gap: 32px; }

/* Grid ===================== */
.grid-auto-flow--column { grid-auto-flow: column; }
.grid-auto-flow--dense { grid-auto-flow: dense; }
.grid-auto-flow--row { grid-auto-flow: row; }
.grid-auto-columns--auto { grid-auto-columns: auto; }
.grid-auto-rows--auto { grid-auto-rows: auto; }
.grid-template-columns--none { grid-template-columns: none; }
.grid-template-rows--none { grid-template-rows: none; }
.justify-items--start { justify-items: start; }
.justify-items--end { justify-items: end; }
.justify-items--center { justify-items: center; }
.justify-items--stretch { justify-items: stretch; }
.align-items--start { align-items: start; } /* (also above - valid for grid) */
.align-items--end { align-items: end; }   /* (also above) */

/* Height ===================== */
.height--0 { height: 0; }
.height--auto { height: auto; }
.height--100pct { height: 100%; }
.height--100vh { height: 100vh; }
.height--fit-content { height: fit-content; }
.height--max-content { height: max-content; }
.height--min-content { height: min-content; }

/* Inset (top/right/bottom/left) ===================== */
.inset--0 { inset: 0; }
.inset--auto { inset: auto; }
.inset-block--0 { inset-block: 0; }
.inset-inline--0 { inset-inline: 0; }

.top--0 { top: 0; }
.top--auto { top: auto; }
.right--0 { right: 0; }
.right--auto { right: auto; }
.bottom--0 { bottom: 0; }
.bottom--auto { bottom: auto; }
.left--0 { left: 0; }
.left--auto { left: auto; }

/* Isolation / Pointer Events ===================== */
.isolation--auto { isolation: auto; }
.isolation--isolate { isolation: isolate; }

.pointer-events--auto { pointer-events: auto; }
.pointer-events--none { pointer-events: none; }

/* Justify Content / Items / Self ===================== */
.justify-content--center { justify-content: center; }
.justify-content--flex-end { justify-content: flex-end; }
.justify-content--flex-start { justify-content: flex-start; }
.justify-content--space-around { justify-content: space-around; }
.justify-content--space-between { justify-content: space-between; }
.justify-content--space-evenly { justify-content: space-evenly; }

.justify-self--auto { justify-self: auto; }
.justify-self--center { justify-self: center; }
.justify-self--end { justify-self: end; }
.justify-self--start { justify-self: start; }
.justify-self--stretch { justify-self: stretch; }

/* List / Outline ===================== */
.list-style--none { list-style: none; }
.list-style-position--inside { list-style-position: inside; }
.list-style-position--outside { list-style-position: outside; }

.outline--none { outline: none !important; }
.outline--0 { outline: 0 !important; }
.outline-style--dashed { outline-style: dashed; }
.outline-style--dotted { outline-style: dotted; }
.outline-style--solid { outline-style: solid; }
.outline-offset--0 { outline-offset: 0; }
.outline-offset--2px { outline-offset: 2px; }

/* Margin ===================== */
.margin--0 { margin: 0 !important; }
.margin--auto { margin: auto; }
.margin--4px { margin: 4px; }
.margin--8px { margin: 8px; }
.margin--16px { margin: 16px; }
.margin--24px { margin: 24px; }
.margin--32px { margin: 32px; }

.margin-block--0 { margin-block: 0 !important; }
.margin-inline--0 { margin-inline: 0 !important; }

.margin-top--0 { margin-top: 0 !important; }
.margin-right--0 { margin-right: 0 !important; }
.margin-bottom--0 { margin-bottom: 0 !important; }
.margin-left--0 { margin-left: 0 !important; }

/* Max/Min Sizes ===================== */
.max-height--none { max-height: none; }
.max-height--100pct { max-height: 100%; }
.max-height--100vh { max-height: 100vh; }

.max-width--none { max-width: none; }
.max-width--100pct { max-width: 100%; }
.max-width--100vw { max-width: 100vw; }

.min-height--0 { min-height: 0; }
.min-height--100pct { min-height: 100%; }
.min-height--100vh { min-height: 100vh; }

.min-width--0 { min-width: 0; }
.min-width--100pct { min-width: 100%; }
.min-width--100vw { min-width: 100vw; }

/* Object Fit / Position ===================== */
.object-fit--contain { object-fit: contain; }
.object-fit--cover { object-fit: cover; }
.object-fit--fill { object-fit: fill; }
.object-fit--none { object-fit: none; }
.object-fit--scale-down { object-fit: scale-down; }

.object-position--center { object-position: center; }
.object-position--top { object-position: top; }
.object-position--right { object-position: right; }
.object-position--bottom { object-position: bottom; }
.object-position--left { object-position: left; }

/* Overflow (kept & expanded) ===================== */
.overflow--auto { overflow: auto; }
.overflow--clip { overflow: clip; }
.overflow--hidden { overflow: hidden; }
.overflow--scroll { overflow: scroll; }
.overflow--visible { overflow: visible; }

.overflow-x--auto { overflow-x: auto; }
.overflow-x--hidden { overflow-x: hidden; }
.overflow-x--scroll { overflow-x: scroll; }
.overflow-x--visible { overflow-x: visible; }

.overflow-y--auto { overflow-y: auto; }
.overflow-y--hidden { overflow-y: hidden; }
.overflow-y--scroll { overflow-y: scroll; }
.overflow-y--visible { overflow-y: visible; }

/* Padding ===================== */
.padding--0 { padding: 0 !important; }
.padding--4px { padding: 4px; }
.padding--8px { padding: 8px; }
.padding--16px { padding: 16px; }
.padding--24px { padding: 24px; }
.padding--32px { padding: 32px; }

.padding-block--0 { padding-block: 0 !important; }
.padding-inline--0 { padding-inline: 0 !important; }

.padding-top--0 { padding-top: 0 !important; }
.padding-right--0 { padding-right: 0 !important; }
.padding-bottom--0 { padding-bottom: 0 !important; }
.padding-left--0 { padding-left: 0 !important; }

/* Position (kept & expanded) ===================== */
.position--absolute { position: absolute; }
.position--fixed { position: fixed; }
.position--relative { position: relative; }
.position--static { position: static; }
.position--sticky { position: sticky; }

/* Resize ===================== */
.resize--none { resize: none; }
.resize--both { resize: both; }
.resize--horizontal { resize: horizontal; }
.resize--vertical { resize: vertical; }

/* Row ===================== */
.row-gap--0 { row-gap: 0; }
.row-gap--8px { row-gap: 8px; }
.row-gap--16px { row-gap: 16px; }
.row-gap--24px { row-gap: 24px; }
.row-gap--32px { row-gap: 32px; }

/* Scroll Behavior ===================== */
.scroll-behavior--auto { scroll-behavior: auto; }
.scroll-behavior--smooth { scroll-behavior: smooth; }

/* Text / Typography ===================== */
.font-style--italic { font-style: italic; }
.font-style--normal { font-style: normal; }

.font-weight--100 { font-weight: 100; }
.font-weight--200 { font-weight: 200; }
.font-weight--300 { font-weight: 300; }
.font-weight--400 { font-weight: 400; }
.font-weight--500 { font-weight: 500; }
.font-weight--600 { font-weight: 600; }
.font-weight--700 { font-weight: 700; }
.font-weight--800 { font-weight: 800; }
.font-weight--900 { font-weight: 900; }

.font-variant-numeric--tabular-nums { font-variant-numeric: tabular-nums; }
.font-variant-numeric--lining-nums { font-variant-numeric: lining-nums; }
.font-variant-numeric--oldstyle-nums { font-variant-numeric: oldstyle-nums; }

.letter-spacing--normal { letter-spacing: normal; }
.letter-spacing--tight { letter-spacing: -0.02em; }
.letter-spacing--wide { letter-spacing: 0.05em; }

.line-height--1 { line-height: 1; }
.line-height--1-2 { line-height: 1.2; }
.line-height--1-5 { line-height: 1.5; }
.line-height--normal { line-height: normal; }

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

.text-decoration--none { text-decoration: none; }
.text-decoration--underline { text-decoration: underline; }
.text-decoration--line-through { text-decoration: line-through; }

.text-decoration-style--solid { text-decoration-style: solid; }
.text-decoration-style--dashed { text-decoration-style: dashed; }
.text-decoration-style--dotted { text-decoration-style: dotted; }
.text-decoration-thickness--auto { text-decoration-thickness: auto; }
.text-decoration-thickness--2px { text-decoration-thickness: 2px; }

.text-overflow--clip { text-overflow: clip; }
.text-overflow--ellipsis { text-overflow: ellipsis; }

.text-transform--capitalize { text-transform: capitalize; }
.text-transform--lowercase { text-transform: lowercase; }
.text-transform--none { text-transform: none; }
.text-transform--uppercase { text-transform: uppercase; }

.white-space--normal { white-space: normal; }
.white-space--nowrap { white-space: nowrap; }
.white-space--pre { white-space: pre; }
.white-space--pre-wrap { white-space: pre-wrap; }
.white-space--pre-line { white-space: pre-line; }

.word-break--break-all { word-break: break-all; }
.word-break--keep-all { word-break: keep-all; }
.word-break--normal { word-break: normal; }
.overflow-wrap--anywhere { overflow-wrap: anywhere; }
.overflow-wrap--break-word { overflow-wrap: break-word; }

/* Transform / Transition (basic) ===================== */
.transform--none { transform: none; }
.transform-origin--center { transform-origin: center; }
.transform-origin--top-left { transform-origin: top left; }

.transition--none { transition: none; }
.transition-duration--0ms { transition-duration: 0ms; }
.transition-duration--150ms { transition-duration: 150ms; }
.transition-duration--300ms { transition-duration: 300ms; }
.transition-timing-function--ease { transition-timing-function: ease; }

ul.display--flex[class*="gap--"] {
   &>li {
    margin-block-start: 0;
  } 
}

ul.display--flex.optic-4-3-2-1 {
  flex-wrap: wrap;
  gap: 32px;
}

ul.display--flex.optic-4-3-2-1 > li {
  flex-basis: calc(25% - 24px);
  margin-block-start: 0;
}

@media screen and (max-width: 1800px) {
  ul.display--flex.optic-4-3-2-1 > li {
    flex-basis: calc(33.3333% - 21.3333px);
  }
}

@media screen and (max-width: 1200px) {
  ul.display--flex.optic-4-3-2-1 > li {
    flex-basis: calc(50% - 16px);
  }
}

@media screen and (max-width: 600px) {
  ul.display--flex.optic-4-3-2-1 > li {
    flex-basis: 100%;
  }
}

ul.display--flex.optic-3-2-1 {
  flex-wrap: wrap;
  gap: 32px;
}

ul.display--flex.optic-3-2-1 > li {
  flex-basis: calc(33.3333% - 21.3333px);
  margin-block-start: 0;
}

@media screen and (max-width: 1200px) {
  ul.display--flex.optic-3-2-1 > li {
    flex-basis: calc(50% - 16px);
  }
}

@media screen and (max-width: 600px) {
  ul.display--flex.optic-3-2-1 > li {
    flex-basis: 100%;
  }
}