/* =========================
   CURSOR
========================= */

.pointer {
   cursor: pointer;
 }
 
 
 /* =========================
    DISPLAY
 ========================= */
 
 .block {
   display: block;
 }
 
 .inline-block {
  display: inline-block;
}

 .inline {
   display: inline;
 }
 
 .flex {
   display: flex;
 }
 
 .inline-flex {
   display: inline-flex;
 }
 
 .grid {
   display: grid;
 }
 
 .hidden {
   display: none;
 }
 
 
 /* =========================
    POSITION
 ========================= */
 
 .fixed {
   position: fixed;
 }
 
 .absolute {
   position: absolute;
 }
 
 .relative {
   position: relative;
 }
 
 .top {
   top: 0;
 }
 
 .right {
   right: 0;
 }
 
 .bottom {
   bottom: 0;
 }
 
 .left {
   left: 0;
 }
 
 .inset-0 {
   inset: 0;
 }
 
 
 /* =========================
    FLEX
 ========================= */
 
 .flex-row {
   flex-direction: row;
 }
 
 .flex-col {
   flex-direction: column;
 }
 
 .flex-wrap {
   flex-wrap: wrap;
 }
 
 .items-center {
   align-items: center;
 }
 
 .items-start {
   align-items: flex-start;
 }
 
 .items-end {
   align-items: flex-end;
 }
 
 .justify-center {
   justify-content: center;
 }
 
 .justify-between {
   justify-content: space-between;
 }
 
 .justify-end {
   justify-content: flex-end;
 }
 
 .flex-1 {
   flex: 1;
 }
 
 .flex-shrink-0 {
   flex-shrink: 0;
 }
 
 
 /* =========================
    GAP
 ========================= */
 
 .gap-0 {
   gap: 0;
 }
 
 .gap-1 {
   gap: var(--space-1);
 }
 
 .gap-2 {
   gap: var(--space-2);
 }
 
 .gap-3 {
   gap: var(--space-3);
 }
 
 .gap-4 {
   gap: var(--space-4);
 }
 
 .gap-6 {
   gap: var(--space-6);
 }
 
 
 /* =========================
    PADDING
 ========================= */
 
 .p-1 {
   padding: var(--space-1);
 }
 
 .p-2 {
   padding: var(--space-2);
 }
 
 .p-3 {
   padding: var(--space-3);
 }
 
 .p-4 {
   padding: var(--space-4);
 }
 
 .p-6 {
   padding: var(--space-6);
 }
 
 .p-8 {
   padding: var(--space-8);
 }
 
 .p-10 {
  padding: var(--space-10);
}

.p-12 {
   padding: var(--space-12);
 }
 .pt-1 {
   padding-top: var(--space-1);
 }
 
 .pt-2 {
   padding-top: var(--space-2);
 }
 
 .pt-3 {
   padding-top: var(--space-3);
 }
 
 .pt-4 {
   padding-top: var(--space-4);
 }
 
 .pt-5 {
   padding-top: var(--space-5);
 }
 
 .pb-1 {
   padding-bottom: var(--space-1);
 }
 
 .pb-2 {
   padding-bottom: var(--space-2);
 }
 
 .pb-3 {
   padding-bottom: var(--space-3);
 }
 
 .pb-4 {
   padding-bottom: var(--space-4);
 }
 
 .pb-5 {
   padding-bottom: var(--space-5);
 }
 
 .pl-1 {
   padding-left: var(--space-1);
 }
 
 .pl-2 {
   padding-left: var(--space-2);
 }
 
 .pl-3 {
   padding-left: var(--space-3);
 }
 .pl-4 {
  padding-left: var(--space-4);
}
 .pr-1 {
   padding-right: var(--space-1);
 }
 
 .pr-2 {
   padding-right: var(--space-2);
 }
 
 .pr-3 {
   padding-right: var(--space-3);
 }
 .pr-4 {
  padding-right: var(--space-4);
}

 
 
 
 /* =========================
    MARGIN
 ========================= */
 
 .m-1 {
   margin: var(--space-1);
 }
 
 .m-2 {
   margin: var(--space-2);
 }
 
 .m-3 {
   margin: var(--space-3);
 }
 
 .m-4 {
   margin: var(--space-4);
 }
 
 .m-6 {
   margin: var(--space-6);
 }
 .mt-auto{
    margin-top: auto;
 }
 .mt-1 {
   margin-top: var(--space-1);
 }
 
 .mt-2 {
   margin-top: var(--space-2);
 }
 
 .mt-3 {
   margin-top: var(--space-3);
 }
 
 .mt-4 {
   margin-top: var(--space-4);
 }
 
 .mt-5 {
   margin-top: var(--space-5);
 }
 
 .mb-1 {
   margin-bottom: var(--space-1);
 }
 
 .mb-2 {
   margin-bottom: var(--space-2);
 }
 
 .mb-3 {
   margin-bottom: var(--space-3);
 }
 
 .mb-4 {
   margin-bottom: var(--space-4);
 }
 
 .mb-5 {
   margin-bottom: var(--space-5);
 }
 .mb-6 {
  margin-bottom: var(--space-6);
}
.mb-8 {
  margin-bottom: var(--space-8);
}
.mb-10 {
  margin-bottom: var(--space-10);
}
 .ml-1 {
   margin-left: var(--space-1);
 }
 
 .ml-2 {
   margin-left: var(--space-2);
 }
 
 .ml-3 {
   margin-left: var(--space-3);
 }
 
 .mr-1 {
   margin-right: var(--space-1);
 }
 
 .mr-2 {
   margin-right: var(--space-2);
 }
 
 .mr-3 {
   margin-right: var(--space-3);
 }
 
 .mx-1 {
   margin-inline: var(--space-1);
 }
 
 .mx-2 {
   margin-inline: var(--space-2);
 }
 
 .mx-3 {
   margin-inline: var(--space-3);
 }
 
 .my-1 {
   margin-block: var(--space-1);
 }
 
 .my-2 {
   margin-block: var(--space-2);
 }
 
 .my-3 {
   margin-block: var(--space-3);
 }
.my-4 {
  margin-block: var(--space-4);
}

.my-6 {
  margin-block: var(--space-6);
}

.my-8 {
  margin-block: var(--space-8);
}

.my-10 {
  margin-block: var(--space-10);
}

.my-12 {
  margin-block: var(--space-12);
}

.my-16 {
  margin-block: var(--space-16);
}
 .margin-auto {
   margin: auto;
 }
 
 
 /* =========================
    WIDTH / HEIGHT
 ========================= */
 
 .w-full {
   width: 100%;
 }
 
 .w-auto {
   width: auto;
 }
.w-max-full{
  max-width: 100%;
 }
 .h-full {
   height: 100%;
 }
 .w-1\/4 {
  width: 25%;
}
 .w-1\/2 {
   width: 50%;
 }
 
 .w-1\/3 {
   width: 33.333%;
 }
 
 .w-2\/3 {
   width: 66.666%;
 }
 
 .w-2\/5 {
   width: 40%;
 }
 
 .w-3\/5 {
   width: 60%;
 }
 .w-3\/4 {
  width: 75%;
}
 
.max-w-160 { max-width: 160px; }
 
 /* =========================
    TEXT ALIGNMENT
 ========================= */
 
 .text-left {
   text-align: left;
 }
 
 .text-center {
   text-align: center;
 }
 
 .text-right {
   text-align: right;
 }
 
 
 /* =========================
    TYPOGRAPHY
 ========================= */
 
 .text-xs {
   font-size: 0.75rem;
 }
 
 .text-sm {
   font-size: 0.875rem;
 }
 
 .text-base {
   font-size: 1rem;
 }
 
 .text-lg {
   font-size: 1.125rem;
 }
 
 .text-xl {
   font-size: 1.25rem;
 }
 
 .text-title-s {
   font-size: 2rem;
   line-height: 1;
 }
 
 .text-title-m {
   font-size: 4rem;
   line-height: 1.05;
 }
 
 .text-title-l {
   font-size: 6rem;
   line-height: 1.0;
 }
 
 .font-body {
  font-family: var(--font-body);
  }

  .font-heading {
    font-family: var(--font-heading);
  }

 .font-light {
   font-weight: 300;
 }
 
 .font-normal {
   font-weight: 400;
 }
 
 .font-bold {
   font-weight: 700;
 }
 
 .font-italic {
   font-style: italic;
 }
 
 .uppercase {
   text-transform: uppercase;
 }
 
 .lowercase {
   text-transform: lowercase;
 }
 
 .capitalize {
   text-transform: capitalize;
 }
 
 .no-bullets {
   list-style: none;
 }

/* =========================
   OVERFLOW
========================= */

.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

.overflow-visible {
  overflow: visible;
}

/* =========================
   OBJECT
========================= */

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

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

.py-1 {
  padding-block: var(--space-1);
}

.py-2 {
  padding-block: var(--space-2);
}

.py-3 {
  padding-block: var(--space-3);
}

.py-4 {
  padding-block: var(--space-4);
}

.py-6 {
  padding-block: var(--space-6);
}

.py-8 {
  padding-block: var(--space-8);
}

.py-10 {
  padding-block: var(--space-10);
}

.py-12 {
  padding-block: var(--space-12);
}

.py-16 {
  padding-block: var(--space-16);
}

.py-20 {
  padding-block: var(--space-20);
}

.py-24 {
  padding-block: var(--space-24);
}

.px-1 {
  padding-inline: var(--space-1);
}

.px-2 {
  padding-inline: var(--space-2);
}

.px-3 {
  padding-inline: var(--space-3);
}

.px-12 {
  padding-inline: var(--space-12);
}

/* =========================
   aspect-ratio
========================= */

.aspect-video {
  aspect-ratio: 16 / 9;
}

.aspect-square {
  aspect-ratio: 1;
}

/* =========================
   aspect-ratio
========================= */

.overlap-bottom-left {
  position: absolute;
  left: var(--space-2);
  bottom: 0;
  transform: translateY(50%);
}

@media (max-width: 768px) {

  .text-title-m {
    font-size: 3rem;
  }

  .text-title-l {
    font-size: 4rem;
  }

}