/* –––––––––––––––––––––––––––––– CONTAINER SIZING –––––––––––––––––––––––––––––––––*/
.container-xs { max-width: 840px; }
.container-s { max-width: 1080px; }
.container-m { max-width: 1200px; }

/* –––––––––––––––––––––––––––––– POSITIONING –––––––––––––––––––––––––––––––––*/
.p-relative { position: relative; }

/* –––––––––––––––––––––––––––––– VISIBILITY –––––––––––––––––––––––––––––––––*/
.overflow-hidden { overflow: hidden; }

.z-1 { z-index: 1; }

@media screen and (max-width: 749px) {
  .hide-m { display: none !important; }
}

@media screen and (min-width: 750px) {
  .show-m { display: none !important; }
}

/* –––––––––––––––––––––––––––––– FLEX & GRID –––––––––––––––––––––––––––––––––*/
.flex { display: flex; }
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

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

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

.grid { display: grid; }
.grid-1 { grid-template-columns: minmax(0, 1fr); }
.grid-2 { grid-template-columns: minmax(0, 2fr); }
.grid-auto { grid-template-columns: auto; }
.grid-1-1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.grid-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.grid-1-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
.grid-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.grid-2-3 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.grid-2-5 { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); }
.grid-3-1 { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
.grid-3-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.grid-1-auto { grid-template-columns: minmax(0, 1fr) auto; }
.grid-2-auto { grid-template-columns: minmax(0, 2fr) auto; }
.grid-3-auto { grid-template-columns: minmax(0, 3fr) auto; }
.grid-auto-1 { grid-template-columns: auto minmax(0, 1fr); }
.grid-auto-2 { grid-template-columns: auto minmax(0, 2fr); }
.grid-auto-3 { grid-template-columns: auto minmax(0, 3fr); }
.grid-auto-auto { grid-template-columns: auto auto; }

.grid-1-1-1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.grid-2-1-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.grid-1-2-1 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }
.grid-1-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); }
.grid-2-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr); }
.grid-2-1-2 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr); }
.grid-1-2-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 2fr); }
.grid-2-2-2 { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 2fr); }
.grid-auto-1-1 { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); }
.grid-1-auto-1 { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.grid-1-1-auto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.grid-auto-2-1 { grid-template-columns: auto minmax(0, 2fr) minmax(0, 1fr); }
.grid-2-auto-1 { grid-template-columns: minmax(0, 2fr) auto minmax(0, 1fr); }
.grid-2-1-auto { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; }
.grid-auto-auto-auto { grid-template-columns: auto auto auto; }
.grid-1-1-1-1-1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }

.grid-colspan-1 { grid-column: span 1; }
.grid-colspan-2 { grid-column: span 2; }
.grid-colspan-3 { grid-column: span 3; }
.grid-colspan-4 { grid-column: span 4; }
.grid-colspan-5 { grid-column: span 5; }
.grid-colspan-6 { grid-column: span 6; }
.grid-colspan-7 { grid-column: span 7; }
.grid-colspan-8 { grid-column: span 8; }
.grid-colspan-9 { grid-column: span 9; }
.grid-colspan-10 { grid-column: span 10; }

.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.order-6 { order: 6; }
.order-7 { order: 7; }
.order-8 { order: 8; }
.order-9 { order: 9; }
.order-10 { order: 10; }

@media (max-width: 749px) {
  .grid-m-1 { grid-template-columns: minmax(0, 1fr); }
  .grid-m-1-1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .grid-m-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .grid-m-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .grid-m-1-auto { grid-template-columns: minmax(0, 1fr) auto; }
  .grid-m-2-auto { grid-template-columns: minmax(0, 2fr) auto; }
  .grid-m-auto-1 { grid-template-columns: auto minmax(0, 1fr); }
  .grid-m-auto-2 { grid-template-columns: auto minmax(0, 2fr); }
  .grid-m-auto-auto { grid-template-columns: auto auto; }
  .grid-m-1-1-1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .grid-m-2-1-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .grid-m-1-2-1 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }
  .grid-m-1-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); }
  .grid-m-2-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr); }
  .grid-m-2-1-2 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr); }
  .grid-m-1-2-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 2fr); }
  .grid-m-2-2-2 { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 2fr); }
  .grid-m-auto-1-1 { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); }
  .grid-m-1-auto-1 { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .grid-m-1-1-auto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .grid-m-auto-2-1 { grid-template-columns: auto minmax(0, 2fr) minmax(0, 1fr); }
  .grid-m-2-auto-1 { grid-template-columns: minmax(0, 2fr) auto minmax(0, 1fr); }
  .grid-m-2-1-auto { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; }
  .grid-m-auto-auto-auto { grid-template-columns: auto auto auto; }

  .grid-colspan-m-1 { grid-column: span 1; }
  .grid-colspan-m-2 { grid-column: span 2; }
  .grid-colspan-m-3 { grid-column: span 3; }
  .grid-colspan-m-4 { grid-column: span 4; }
  .grid-colspan-m-5 { grid-column: span 5; }
  .grid-colspan-m-6 { grid-column: span 6; }
  .grid-colspan-m-7 { grid-column: span 7; }
  .grid-colspan-m-8 { grid-column: span 8; }
  .grid-colspan-m-9 { grid-column: span 9; }
  .grid-colspan-m-10 { grid-column: span 10; }

  .order-m--5 { order: -5; }
  .order-m--4 { order: -4; }
  .order-m--3 { order: -3; }
  .order-m--2 { order: -2; }
  .order-m--1 { order: -1; }
  .order-m-0 { order: 0; }
  .order-m-1 { order: 1; }
  .order-m-2 { order: 2; }
  .order-m-3 { order: 3; }
  .order-m-4 { order: 4; }
  .order-m-5 { order: 5; }
  .order-m-6 { order: 6; }
  .order-m-7 { order: 7; }
  .order-m-8 { order: 8; }
  .order-m-9 { order: 9; }
  .order-m-10 { order: 10; }
}

/* –––––––––––––––––––––––––––––– DISTANCES BETWEEN ELEMENTS –––––––––––––––––––––––––––––––––*/
.mb-0   { margin-bottom: 0px; }
.mb-xs  { margin-bottom: var(--spacing-xs); }
.mb-s   { margin-bottom: var(--spacing-s); }
.mb-m   { margin-bottom: var(--spacing-m); }
.mb-l   { margin-bottom: var(--spacing-l); }
.mb-xl  { margin-bottom: var(--spacing-xl); }
.mb-2xl { margin-bottom: var(--spacing-2xl); }
.mb-3xl { margin-bottom: var(--spacing-3xl); }
.mb-4xl { margin-bottom: var(--spacing-4xl); }
.mb-5xl { margin-bottom: var(--spacing-5xl); }

.mt-0   { margin-top: 0px; }
.mt-xs  { margin-top: var(--spacing-xs); }
.mt-s   { margin-top: var(--spacing-s); }
.mt-m   { margin-top: var(--spacing-m); }
.mt-l   { margin-top: var(--spacing-l); }
.mt-xl  { margin-top: var(--spacing-xl); }
.mt-2xl { margin-top: var(--spacing-2xl); }
.mt-3xl { margin-top: var(--spacing-3xl); }
.mt-4xl { margin-top: var(--spacing-4xl); }
.mt-5xl { margin-top: var(--spacing-5xl); }

.gap-0   { gap: 0px !important; }
.gap-xs  { gap: var(--spacing-xs); }
.gap-s   { gap: var(--spacing-s); }
.gap-m   { gap: var(--spacing-m); }
.gap-l   { gap: var(--spacing-l); }
.gap-xl  { gap: var(--spacing-xl); }
.gap-2xl { gap: var(--spacing-2xl); }
.gap-3xl { gap: var(--spacing-3xl); }
.gap-4xl { gap: var(--spacing-4xl); }
.gap-5xl { gap: var(--spacing-5xl); }

.gap-r-0   { row-gap: 0px !important; }
.gap-r-xs  { row-gap: var(--spacing-xs); }
.gap-r-s   { row-gap: var(--spacing-s); }
.gap-r-m   { row-gap: var(--spacing-m); }
.gap-r-l   { row-gap: var(--spacing-l); }
.gap-r-xl  { row-gap: var(--spacing-xl); }
.gap-r-2xl { row-gap: var(--spacing-2xl); }
.gap-r-3xl { row-gap: var(--spacing-3xl); }
.gap-r-4xl { row-gap: var(--spacing-4xl); }
.gap-r-5xl { row-gap: var(--spacing-5xl); }

.gap-c-0   { column-gap: 0px !important; }
.gap-c-xs  { column-gap: var(--spacing-xs); }
.gap-c-s   { column-gap: var(--spacing-s); }
.gap-c-m   { column-gap: var(--spacing-m); }
.gap-c-l   { column-gap: var(--spacing-l); }
.gap-c-xl  { column-gap: var(--spacing-xl); }
.gap-c-2xl { column-gap: var(--spacing-2xl); }
.gap-c-3xl { column-gap: var(--spacing-3xl); }
.gap-c-4xl { column-gap: var(--spacing-4xl); }
.gap-c-5xl { column-gap: var(--spacing-5xl); }

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

.h-0   { height: 0px; }
.h-xs  { height: var(--spacing-xs); }
.h-s   { height: var(--spacing-s); }
.h-m   { height: var(--spacing-m); }
.h-l   { height: var(--spacing-l); }
.h-xl  { height: var(--spacing-xl); }
.h-2xl { height: var(--spacing-2xl); }
.h-3xl { height: var(--spacing-3xl); }
.h-4xl { height: var(--spacing-4xl); }
.h-5xl { height: var(--spacing-5xl); }
.h-25  { height: 25%; }
.h-50  { height: 50%; }
.h-75  { height: 75%; }
.h-100 { height: 100%; }

.h-min-xl { min-height: calc(var(--spacing-xl) * 8); }
.h-min-2xl { min-height: calc(var(--spacing-2xl) * 8); }
.h-min-3xl { min-height: calc(var(--spacing-3xl) * 8); }
.h-min-4xl { min-height: calc(var(--spacing-4xl) * 8); }
.h-min-5xl { min-height: calc(var(--spacing-5xl) * 8); }

.w-0   { width: 0px; }
.w-xs  { width: var(--spacing-xs); }
.w-s   { width: var(--spacing-s); }
.w-m   { width: var(--spacing-m); }
.w-l   { width: var(--spacing-l); }
.w-xl  { width: var(--spacing-xl); }
.w-2xl { width: var(--spacing-2xl); }
.w-3xl { width: var(--spacing-3xl); }
.w-4xl { width: var(--spacing-4xl); }
.w-5xl { width: var(--spacing-5xl); }
.w-25  { width: 25%; }
.w-50  { width: 50%; }
.w-75  { width: 75%; }
.w-90  { width: 90%; }
.w-100 { width: 100%; }

.py-0   { padding-top: 0px; padding-bottom: 0px; }
.py-xs  { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); }
.py-s   { padding-top: var(--spacing-s); padding-bottom: var(--spacing-s); }
.py-m   { padding-top: var(--spacing-m); padding-bottom: var(--spacing-m); }
.py-l   { padding-top: var(--spacing-l); padding-bottom: var(--spacing-l); }
.py-xl  { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
.py-2xl { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); }
.py-3xl { padding-top: var(--spacing-3xl); padding-bottom: var(--spacing-3xl); }
.py-4xl { padding-top: var(--spacing-4xl); padding-bottom: var(--spacing-4xl); }
.py-5xl { padding-top: var(--spacing-5xl); padding-bottom: var(--spacing-5xl); }

.px-0   { padding-left: 0px; padding-right: 0px; }
.px-xs  { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); }
.px-s   { padding-left: var(--spacing-s); padding-right: var(--spacing-s); }
.px-m   { padding-left: var(--spacing-m); padding-right: var(--spacing-m); }
.px-l   { padding-left: var(--spacing-l); padding-right: var(--spacing-l); }
.px-xl  { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }
.px-2xl { padding-left: var(--spacing-2xl); padding-right: var(--spacing-2xl); }
.px-3xl { padding-left: var(--spacing-3xl); padding-right: var(--spacing-3xl); }
.px-4xl { padding-left: var(--spacing-4xl); padding-right: var(--spacing-4xl); }
.px-5xl { padding-left: var(--spacing-5xl); padding-right: var(--spacing-5xl); }

.pt-0   { padding-top: 0px; }
.pt-xs  { padding-top: var(--spacing-xs); }
.pt-s   { padding-top: var(--spacing-s); }
.pt-m   { padding-top: var(--spacing-m); }
.pt-l   { padding-top: var(--spacing-l); }
.pt-xl  { padding-top: var(--spacing-xl); }
.pt-2xl { padding-top: var(--spacing-2xl); }
.pt-3xl { padding-top: var(--spacing-3xl); }
.pt-4xl { padding-top: var(--spacing-4xl); }
.pt-5xl { padding-top: var(--spacing-5xl); }

.pr-0   { padding-right: 0px; }
.pr-xs  { padding-right: var(--spacing-xs); }
.pr-s   { padding-right: var(--spacing-s); }
.pr-m   { padding-right: var(--spacing-m); }
.pr-l   { padding-right: var(--spacing-l); }
.pr-xl  { padding-right: var(--spacing-xl); }
.pr-2xl { padding-right: var(--spacing-2xl); }
.pr-3xl { padding-right: var(--spacing-3xl); }
.pr-4xl { padding-right: var(--spacing-4xl); }
.pr-5xl { padding-right: var(--spacing-5xl); }

.pb-0   { padding-bottom: 0px; }
.pb-xs  { padding-bottom: var(--spacing-xs); }
.pb-s   { padding-bottom: var(--spacing-s); }
.pb-m   { padding-bottom: var(--spacing-m); }
.pb-l   { padding-bottom: var(--spacing-l); }
.pb-xl  { padding-bottom: var(--spacing-xl); }
.pb-2xl { padding-bottom: var(--spacing-2xl); }
.pb-3xl { padding-bottom: var(--spacing-3xl); }
.pb-4xl { padding-bottom: var(--spacing-4xl); }
.pb-5xl { padding-bottom: var(--spacing-5xl); }

.pl-0   { padding-left: 0px; }
.pl-xs  { padding-left: var(--spacing-xs); }
.pl-s   { padding-left: var(--spacing-s); }
.pl-m   { padding-left: var(--spacing-m); }
.pl-l   { padding-left: var(--spacing-l); }
.pl-xl  { padding-left: var(--spacing-xl); }
.pl-2xl { padding-left: var(--spacing-2xl); }
.pl-3xl { padding-left: var(--spacing-3xl); }
.pl-4xl { padding-left: var(--spacing-4xl); }
.pl-5xl { padding-left: var(--spacing-5xl); }

@media screen and (max-width: 749px) {
  .mb-m-0   { margin-bottom: 0px; }
  .mb-m-xs  { margin-bottom: var(--spacing-xs); }
  .mb-m-s   { margin-bottom: var(--spacing-s); }
  .mb-m-m   { margin-bottom: var(--spacing-m); }
  .mb-m-l   { margin-bottom: var(--spacing-l); }
  .mb-m-xl  { margin-bottom: var(--spacing-xl); }
  .mb-m-2xl { margin-bottom: var(--spacing-2xl); }
  .mb-m-3xl { margin-bottom: var(--spacing-3xl); }
  .mb-m-4xl { margin-bottom: var(--spacing-4xl); }
  .mb-m-5xl { margin-bottom: var(--spacing-5xl); }

  .mt-m-0   { margin-top: 0px; }
  .mt-m-xs  { margin-top: var(--spacing-xs); }
  .mt-m-s   { margin-top: var(--spacing-s); }
  .mt-m-m   { margin-top: var(--spacing-m); }
  .mt-m-l   { margin-top: var(--spacing-l); }
  .mt-m-xl  { margin-top: var(--spacing-xl); }
  .mt-m-2xl { margin-top: var(--spacing-2xl); }
  .mt-m-3xl { margin-top: var(--spacing-3xl); }
  .mt-m-4xl { margin-top: var(--spacing-4xl); }
  .mt-m-5xl { margin-top: var(--spacing-5xl); }

  .gap-m-0   { gap: 0px !important; }
  .gap-m-xs  { gap: var(--spacing-xs); }
  .gap-m-s   { gap: var(--spacing-s); }
  .gap-m-m   { gap: var(--spacing-m); }
  .gap-m-l   { gap: var(--spacing-l); }
  .gap-m-xl  { gap: var(--spacing-xl); }
  .gap-m-2xl { gap: var(--spacing-2xl); }
  .gap-m-3xl { gap: var(--spacing-3xl); }
  .gap-m-4xl { gap: var(--spacing-4xl); }
  .gap-m-5xl { gap: var(--spacing-5xl); }

  .gap-r-m-0   { row-gap: 0px !important; }
  .gap-r-m-xs  { row-gap: var(--spacing-xs); }
  .gap-r-m-s   { row-gap: var(--spacing-s); }
  .gap-r-m-m   { row-gap: var(--spacing-m); }
  .gap-r-m-l   { row-gap: var(--spacing-l); }
  .gap-r-m-xl  { row-gap: var(--spacing-xl); }
  .gap-r-m-2xl { row-gap: var(--spacing-2xl); }
  .gap-r-m-3xl { row-gap: var(--spacing-3xl); }
  .gap-r-m-4xl { row-gap: var(--spacing-4xl); }
  .gap-r-m-5xl { row-gap: var(--spacing-5xl); }

  .gap-c-m-0   { column-gap: 0px !important; }
  .gap-c-m-xs  { column-gap: var(--spacing-xs); }
  .gap-c-m-s   { column-gap: var(--spacing-s); }
  .gap-c-m-m   { column-gap: var(--spacing-m); }
  .gap-c-m-l   { column-gap: var(--spacing-l); }
  .gap-c-m-xl  { column-gap: var(--spacing-xl); }
  .gap-c-m-2xl { column-gap: var(--spacing-2xl); }
  .gap-c-m-3xl { column-gap: var(--spacing-3xl); }
  .gap-c-m-4xl { column-gap: var(--spacing-4xl); }
  .gap-c-m-5xl { column-gap: var(--spacing-5xl); }

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

  .h-m-0   { height: 0px; }
  .h-m-xs  { height: var(--spacing-xs); }
  .h-m-s   { height: var(--spacing-s); }
  .h-m-m   { height: var(--spacing-m); }
  .h-m-l   { height: var(--spacing-l); }
  .h-m-xl  { height: var(--spacing-xl); }
  .h-m-2xl { height: var(--spacing-2xl); }
  .h-m-3xl { height: var(--spacing-3xl); }
  .h-m-4xl { height: var(--spacing-4xl); }
  .h-m-5xl { height: var(--spacing-5xl); }
  .h-m-25  { height: 25%; }
  .h-m-50  { height: 50%; }
  .h-m-75  { height: 75%; }
  .h-m-100 { height: 100%; }

  .h-m-min-xl { min-height: calc(var(--spacing-xl) * 8); }
  .h-m-min-2xl { min-height: calc(var(--spacing-2xl) * 8); }
  .h-m-min-3xl { min-height: calc(var(--spacing-3xl) * 8); }
  .h-m-min-4xl { min-height: calc(var(--spacing-4xl) * 8); }
  .h-m-min-5xl { min-height: calc(var(--spacing-5xl) * 8); }

  .w-m-0   { width: 0px; }
  .w-m-xs  { width: var(--spacing-xs); }
  .w-m-s   { width: var(--spacing-s); }
  .w-m-m   { width: var(--spacing-m); }
  .w-m-l   { width: var(--spacing-l); }
  .w-m-xl  { width: var(--spacing-xl); }
  .w-m-2xl { width: var(--spacing-2xl); }
  .w-m-3xl { width: var(--spacing-3xl); }
  .w-m-4xl { width: var(--spacing-4xl); }
  .w-m-5xl { width: var(--spacing-5xl); }
  .w-m-25  { width: 25%; }
  .w-m-50  { width: 50%; }
  .w-m-75  { width: 75%; }
  .w-m-90  { width: 90%; }
  .w-m-100 { width: 100%; }

  .py-m-0   { padding-top: 0px; padding-bottom: 0px; }
  .py-m-xs  { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); }
  .py-m-s   { padding-top: var(--spacing-s); padding-bottom: var(--spacing-s); }
  .py-m-m   { padding-top: var(--spacing-m); padding-bottom: var(--spacing-m); }
  .py-m-l   { padding-top: var(--spacing-l); padding-bottom: var(--spacing-l); }
  .py-m-xl  { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
  .py-m-2xl { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); }
  .py-m-3xl { padding-top: var(--spacing-3xl); padding-bottom: var(--spacing-3xl); }
  .py-m-4xl { padding-top: var(--spacing-4xl); padding-bottom: var(--spacing-4xl); }
  .py-m-5xl { padding-top: var(--spacing-5xl); padding-bottom: var(--spacing-5xl); }

  .px-m-0   { padding-left: 0px; padding-right: 0px; }
  .px-m-xs  { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); }
  .px-m-s   { padding-left: var(--spacing-s); padding-right: var(--spacing-s); }
  .px-m-m   { padding-left: var(--spacing-m); padding-right: var(--spacing-m); }
  .px-m-l   { padding-left: var(--spacing-l); padding-right: var(--spacing-l); }
  .px-m-xl  { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }
  .px-m-2xl { padding-left: var(--spacing-2xl); padding-right: var(--spacing-2xl); }
  .px-m-3xl { padding-left: var(--spacing-3xl); padding-right: var(--spacing-3xl); }
  .px-m-4xl { padding-left: var(--spacing-4xl); padding-right: var(--spacing-4xl); }
  .px-m-5xl { padding-left: var(--spacing-5xl); padding-right: var(--spacing-5xl); }

  .pt-m-0   { padding-top: 0px; }
  .pt-m-xs  { padding-top: var(--spacing-xs); }
  .pt-m-s   { padding-top: var(--spacing-s); }
  .pt-m-m   { padding-top: var(--spacing-m); }
  .pt-m-l   { padding-top: var(--spacing-l); }
  .pt-m-xl  { padding-top: var(--spacing-xl); }
  .pt-m-2xl { padding-top: var(--spacing-2xl); }
  .pt-m-3xl { padding-top: var(--spacing-3xl); }
  .pt-m-4xl { padding-top: var(--spacing-4xl); }
  .pt-m-5xl { padding-top: var(--spacing-5xl); }

  .pr-m-0   { padding-right: 0px; }
  .pr-m-xs  { padding-right: var(--spacing-xs); }
  .pr-m-s   { padding-right: var(--spacing-s); }
  .pr-m-m   { padding-right: var(--spacing-m); }
  .pr-m-l   { padding-right: var(--spacing-l); }
  .pr-m-xl  { padding-right: var(--spacing-xl); }
  .pr-m-2xl { padding-right: var(--spacing-2xl); }
  .pr-m-3xl { padding-right: var(--spacing-3xl); }
  .pr-m-4xl { padding-right: var(--spacing-4xl); }
  .pr-m-5xl { padding-right: var(--spacing-5xl); }

  .pb-m-0   { padding-bottom: 0px; }
  .pb-m-xs  { padding-bottom: var(--spacing-xs); }
  .pb-m-s   { padding-bottom: var(--spacing-s); }
  .pb-m-m   { padding-bottom: var(--spacing-m); }
  .pb-m-l   { padding-bottom: var(--spacing-l); }
  .pb-m-xl  { padding-bottom: var(--spacing-xl); }
  .pb-m-2xl { padding-bottom: var(--spacing-2xl); }
  .pb-m-3xl { padding-bottom: var(--spacing-3xl); }
  .pb-m-4xl { padding-bottom: var(--spacing-4xl); }
  .pb-m-5xl { padding-bottom: var(--spacing-5xl); }

  .pl-m-0   { padding-left: 0px; }
  .pl-m-xs  { padding-left: var(--spacing-xs); }
  .pl-m-s   { padding-left: var(--spacing-s); }
  .pl-m-m   { padding-left: var(--spacing-m); }
  .pl-m-l   { padding-left: var(--spacing-l); }
  .pl-m-xl  { padding-left: var(--spacing-xl); }
  .pl-m-2xl { padding-left: var(--spacing-2xl); }
  .pl-m-3xl { padding-left: var(--spacing-3xl); }
  .pl-m-4xl { padding-left: var(--spacing-4xl); }
  .pl-m-5xl { padding-left: var(--spacing-5xl); }
}

/* –––––––––––––––––––––––––––––– OPACITY –––––––––––––––––––––––––––––––––*/

.op-0 { opacity: 0; }
.op-10 { opacity: 0.1; }
.op-20 { opacity: 0.2; }
.op-30 { opacity: 0.3; }
.op-40 { opacity: 0.4; }
.op-50 { opacity: 0.5; }
.op-60 { opacity: 0.6; }
.op-70 { opacity: 0.7; }
.op-80 { opacity: 0.8; }
.op-90 { opacity: 0.9; }
.op-100 { opacity: 1; }

/* –––––––––––––––––––––––––––––– IMAGES –––––––––––––––––––––––––––––––––*/
.media-full {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.media-absolute {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.media-cover {
  object-fit: cover;
}

.media-contain {
  object-fit: contain;
}

/* –––––––––––––––––––––––––––––– ANIMATIONS –––––––––––––––––––––––––––––––––*/
.a-fade-in,
.a-fade-up,
.a-fade-down {
  --transition-delay: calc(var(--delay-index) * var(--stagger-base) + var(--stagger-base));
}

.a-fade-in {
  opacity: 0;
  transition: opacity var(--transition-normal) var(--cubic-bezier);
  transition-delay: var(--transition-delay)
}

.long-text.a-fade-in {
  transition: opacity var(--transition-slow) var(--cubic-bezier);
  transition-delay: var(--transition-delay)
}

.a-triggered.a-fade-in,.a-triggered .a-fade-in {
  opacity: 1
}

.a-fade-up {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--transition-normal) var(--cubic-bezier),transform var(--transition-normal) var(--cubic-bezier);
  transition-delay: var(--transition-delay)
}

.long-text.a-fade-up {
  transition: opacity var(--transition-slow) var(--cubic-bezier), transform var(--transition-slow) var(--cubic-bezier);
  transition-delay: var(--transition-delay)
}

.a-triggered.a-fade-up,.a-triggered .a-fade-up {
  opacity: 1;
  transform: translateY(0)
}

.a-fade-down {
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity var(--transition-normal) var(--cubic-bezier),transform var(--transition-normal) var(--cubic-bezier);
  transition-delay: var(--transition-delay)
}

.long-text.a-fade-down {
  transition: opacity var(--transition-slow) var(--cubic-bezier), transform var(--transition-normal) var(--cubic-bezier);
  transition-delay: var(--transition-delay)
}

.a-triggered.a-fade-down,.a-triggered .a-fade-down {
  opacity: 1;
  transform: translateY(0)
}

.a-slide-up {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.25em;
  margin-top: 0.05em;
}

.a-slide-up>.line-break {
  flex-basis: 100%;
  height: 0;
}

.a-slide-up>div {
  display: inline-block;
  overflow: hidden;
  line-height: 1.15;
  flex-shrink: 0;
  margin-top: -0.05em;
}

.a-slide-up>div>span {
  --transition-delay: calc(var(--delay-index) * var(--stagger-base) + var(--stagger-base));
  display: inline-block;
  transform: translateY(120%);
  transition: transform var(--transition-normal) var(--cubic-bezier);
  transition-delay: var(--transition-delay);
}

.long-text.a-slide-up>div>span {
  transition: transform var(--transition-slow) var(--cubic-bezier);
  transition-delay: var(--transition-delay);
}

.a-triggered.a-slide-up span,.a-triggered .a-slide-up span {
  transform: translateY(0)
}

.a-delay-1  { --delay-index: 1; }
.a-delay-2  { --delay-index: 2; }
.a-delay-3  { --delay-index: 3; }
.a-delay-4  { --delay-index: 4; }
.a-delay-5  { --delay-index: 5; }
.a-delay-6  { --delay-index: 6; }
.a-delay-7  { --delay-index: 7; }
.a-delay-8  { --delay-index: 8; }
.a-delay-9  { --delay-index: 9; }
.a-delay-10 { --delay-index: 10; }
.a-delay-11 { --delay-index: 11; }
.a-delay-12 { --delay-index: 12; }
.a-delay-13 { --delay-index: 13; }
.a-delay-14 { --delay-index: 14; }
.a-delay-15 { --delay-index: 15; }
.a-delay-16 { --delay-index: 16; }
.a-delay-17 { --delay-index: 17; }
.a-delay-18 { --delay-index: 18; }
.a-delay-19 { --delay-index: 19; }
.a-delay-20 { --delay-index: 20; }
.a-delay-21 { --delay-index: 21; }
.a-delay-22 { --delay-index: 22; }
.a-delay-23 { --delay-index: 23; }
.a-delay-24 { --delay-index: 24; }
.a-delay-25 { --delay-index: 25; }
.a-delay-26 { --delay-index: 26; }
.a-delay-27 { --delay-index: 27; }
.a-delay-28 { --delay-index: 28; }
.a-delay-29 { --delay-index: 29; }
.a-delay-30 { --delay-index: 30; }