/*
  ! Formatting based on tailwindcss grouping structure; layout, spacing, sizing, typography etc.

  * 1.0.1 - Add closing comments under endregion to increase readability

  TODO: Update spacing rules to use -block and -inline instead of top & bottom and left & right
  TODO: List of Contents
  TODO: breakpoint variables
  TODO: 2.0 Potential - Reconfig to use variables to make custom classes easier, similar to content-grid
*/
.item-page,
.orca-modal,
[data-ref="webuikit"] .orca-contentful-content,
[data-ref="ow-app"] .orca-contentful-content {
  /*#region | Layout */
  /* ================================================================ */

  /*#region || Aspect Ratio */
  /* ================================================================ */
  .aspect-1200-340 {
    aspect-ratio: 1200 / 340;
  }

  .aspect-1200-360 {
    aspect-ratio: 1200 / 360;
  }

  .aspect-640-400 {
    aspect-ratio: 640 / 400;
  }

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

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

  .aspect-retro-video {
    aspect-ratio: 4 / 3;
  }

  .aspect-auto {
    aspect-ratio: auto;
  }
  /*#endregion Aspect Ratio */
  /* ================================ */

  /*#region || Display */
  /* ================================================================ */
  .inline {
    display: inline;
  }

  .block {
    display: block;
  }

  .inline-block {
    display: inline-block;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }

  .not-sr-only {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
  /*#endregion Display */
  /* ================================ */

  /*#region || Object Fit */
  /* ================================================================ */
  .object-contain {
    object-fit: contain;
  }

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

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

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

  .object-scale-down {
    object-fit: scale-down;
  }
  /*#endregion Object Fit */
  /* ================================ */

  /*#region || Object Position */
  /* ================================================================ */
  .object-top-left {
    object-position: top-left;
  }

  .object-top {
    object-position: top;
  }

  .object-top-right {
    object-position: top-right;
  }

  .object-left {
    object-position: left;
  }

  .object-center {
    object-position: center;
  }

  .object-right {
    object-position: right;
  }

  .object-bottom-left {
    object-position: bottom-left;
  }

  .object-bottom {
    object-position: bottom;
  }

  .object-bottom-right {
    object-position: bottom-right;
  }
  /*#endregion Object Position */
  /* ================================ */

  /*#region || Position */
  /* ================================================================ */
  .static {
    position: static;
  }

  .fixed {
    position: fixed;
  }

  .absolute {
    position: absolute;
  }

  .relative {
    position: relative;
  }

  .sticky {
    position: sticky;
  }
  /*#endregion Position */
  /* ================================ */

  /*#region || Top / Right / Bottom / Left */
  /* ================================================================ */

  /*#region ||| Top */
  /* ================================================================ */
  .top-0 {
    top: 0;
  }

  .top-full {
    top: 100%;
  }

  .-top-full {
    top: -100%;
  }

  .top-auto {
    top: auto;
  }
  /*#endregion Top */
  /* ================================ */

  /*#region ||| Right */
  /* ================================================================ */
  .right-0 {
    top: 0;
  }

  .right-full {
    top: 100%;
  }

  .-right-full {
    top: -100%;
  }

  .right-auto {
    top: auto;
  }
  /*#endregion Right */
  /* ================================ */

  /*#region ||| Bottom */
  /* ================================================================ */
  .bottom-0 {
    top: 0;
  }

  .bottom-full {
    top: 100%;
  }

  .-bottom-full {
    top: -100%;
  }

  .bottom-auto {
    top: auto;
  }
  /*#endregion Bottom */
  /* ================================ */

  /*#region ||| Left */
  /* ================================================================ */
  .left-0 {
    top: 0;
  }

  .left-full {
    top: 100%;
  }

  .-left-full {
    top: -100%;
  }

  .left-auto {
    top: auto;
  }
  /*#endregion Left */
  /* ================================ */

  /*#endregion Top / Right / Bottom / Left */
  /* ================================ */

  /*#region || Z-Index */
  /* ================================================================ */
  .z-index-auto {
    z-index: auto;
  }

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

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

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

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

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

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

  .z-index-999 {
    z-index: 999;
  }
  /*#endregion Z-Index */
  /* ================================ */

  /*#endregion Layout */
  /* ================================ */

  /*#region | Flexbox & Grid */
  /* ================================================================ */

  /*#region || Flex Direction */
  /* ================================================================ */
  .flex-row {
    flex-direction: row;
  }

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

  .flex-col {
    flex-direction: column;
  }

  .flex-col-reverse {
    flex-direction: column-reverse;
  }
  /*#endregion Flex Direction */
  /* ================================ */

  /*#region || Flex Wrap */
  /* ================================================================ */
  .flex-nowrap {
    flex-wrap: nowrap;
  }

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

  .flex-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
  /*#endregion Flex Wrap */
  /* ================================ */

  /*#region || Gap */
  /* ================================================================ */
  .gap-4 {
    gap: 4px;
  }

  .gap-8 {
    gap: 8px;
  }

  .gap-16 {
    gap: 16px;
  }

  .gap-24 {
    gap: 24px;
  }

  .gap-x-4 {
    column-gap: 4px;
  }

  .gap-x-8 {
    column-gap: 8px;
  }

  .gap-x-16 {
    column-gap: 16px;
  }

  .gap-x-24 {
    column-gap: 24px;
  }

  .gap-y-4 {
    row-gap: 4px;
  }

  .gap-y-8 {
    row-gap: 8px;
  }

  .gap-y-16 {
    row-gap: 16px;
  }

  .gap-y-24 {
    row-gap: 24px;
  }
  /*#endregion Gap */
  /* ================================ */

  /*#region || Justify Content */
  /* ================================================================ */
  .justify-start {
    justify-content: flex-start;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .justify-end-safe {
    justify-content: safe flex-end;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-center-safe {
    justify-content: safe center;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-around {
    justify-content: space-around;
  }

  .justify-evenly {
    justify-content: space-evenly;
  }

  .justify-stretch {
    justify-content: stretch;
  }

  .justify-baseline {
    justify-content: baseline;
  }

  .justify-normal {
    justify-content: normal;
  }
  /*#endregion Justify Content */
  /* ================================ */

  /*#region || Justify Items */
  /* ================================================================ */
  .justify-items-start {
    justify-items: start;
  }

  .justify-items-end {
    justify-items: end;
  }

  .justify-items-end-safe {
    justify-items: safe end;
  }

  .justify-items-center {
    justify-items: center;
  }

  .justify-items-center-safe {
    justify-items: safe center;
  }

  .justify-items-stretch {
    justify-items: stretch;
  }

  .justify-items-normal {
    justify-items: normal;
  }
  /*#endregion Justify Items */
  /* ================================ */

  /*#region || Justify Self */
  /* ================================================================ */
  .justify-self-auto {
    justify-self: auto;
  }

  .justify-self-start {
    justify-self: start;
  }

  .justify-self-center {
    justify-self: center;
  }

  .justify-self-center-safe {
    justify-self: safe center;
  }

  .justify-self-end {
    justify-self: end;
  }

  .justify-self-end-safe {
    justify-self: safe end;
  }

  .justify-self-stretch {
    justify-self: stretch;
  }
  /*#endregion Justify Self */
  /* ================================ */

  /*#region || Align Content */
  /* ================================================================ */
  .content-normal {
    align-content: normal;
  }

  .content-center {
    align-content: center;
  }

  .content-start {
    align-content: flex-start;
  }

  .content-end {
    align-content: flex-end;
  }

  .content-between {
    align-content: space-between;
  }

  .content-around {
    align-content: space-around;
  }

  .content-evenly {
    align-content: space-evenly;
  }

  .content-baseline {
    align-content: baseline;
  }

  .content-stretch {
    align-content: stretch;
  }
  /*#endregion Align Content */
  /* ================================ */

  /*#region || Align Items */
  /* ================================================================ */
  .items-start {
    align-items: flex-start;
  }

  .items-end {
    align-items: flex-end;
  }

  .items-end-safe {
    align-items: safe flex-end;
  }

  .items-center {
    align-items: center;
  }

  .items-center-safe {
    align-items: safe center;
  }

  .items-baseline {
    align-items: baseline;
  }

  .items-baseline-last {
    align-items: last baseline;
  }

  .items-stretch {
    align-items: stretch;
  }
  /*#endregion Align Items */
  /* ================================ */

  /*#region || Align Self */
  /* ================================================================ */
  .self-auto {
    align-self: auto;
  }

  .self-start {
    align-self: flex-start;
  }

  .self-end {
    align-self: flex-end;
  }

  .self-end-safe {
    align-self: safe flex-end;
  }

  .self-center {
    align-self: center;
  }

  .self-center-safe {
    align-self: safe center;
  }

  .self-stretch {
    align-self: stretch;
  }

  .self-baseline {
    align-self: baseline;
  }

  .self-baseline-last {
    align-self: last baseline;
  }
  /*#endregion Align Self */
  /* ================================ */

  /*#region || Place Content */
  /* ================================================================ */
  .place-content-center {
    place-content: center;
  }

  .place-content-center-safe {
    place-content: safe center;
  }

  .place-content-start {
    place-content: start;
  }

  .place-content-end {
    place-content: end;
  }

  .place-content-end-safe {
    place-content: safe end;
  }

  .place-content-between {
    place-content: space-between;
  }

  .place-content-around {
    place-content: space-around;
  }

  .place-content-evenly {
    place-content: space-evenly;
  }

  .place-content-baseline {
    place-content: baseline;
  }

  .place-content-stretch {
    place-content: stretch;
  }
  /*#endregion Place Content */
  /* ================================ */

  /*#region || Place Items */
  /* ================================================================ */
  .place-items-start {
    place-items: start;
  }

  .place-items-end {
    place-items: end;
  }

  .place-items-end-safe {
    place-items: safe end;
  }

  .place-items-center {
    place-items: center;
  }

  .place-items-center-safe {
    place-items: safe center;
  }

  .place-items-baseline {
    place-items: baseline;
  }

  .place-items-stretch {
    place-items: stretch;
  }
  /*#endregion Place Items */
  /* ================================ */

  /*#region || Place Self */
  /* ================================================================ */
  .place-self-auto {
    place-self: auto;
  }

  .place-self-start {
    place-self: start;
  }

  .place-self-end {
    place-self: end;
  }

  .place-self-end-safe {
    place-self: safe end;
  }

  .place-self-center {
    place-self: center;
  }

  .place-self-center-safe {
    place-self: safe center;
  }

  .place-self-stretch {
    place-self: stretch;
  }
  /*#endregion Place Self */
  /* ================================ */

  /*#endregion Flexbox & Grid */
  /* ================================ */

  /*#region | Spacing */
  /* ================================================================ */

  /*#region || Margin */
  /* ================================================================ */

  /*#region ||| All Sides */
  /* ================================================================ */
  .m-auto {
    margin: auto;
  }

  .mx-auto {
    margin-right: auto;
    margin-left: auto;
  }

  .my-auto {
    margin-top: auto;
    margin-bottom: auto;
  }

  .m-0 {
    margin: var(--spacing-0, 0px);
  }

  .m-1 {
    margin: var(--spacing-10, 1px);
  }

  .m-2 {
    margin: var(--spacing-25, 2px);
  }

  .m-4 {
    margin: var(--spacing-50, 4px);
  }

  .m-6 {
    margin: var(--spacing-75, 6px);
  }

  .m-8 {
    margin: var(--spacing-100, 8px);
  }

  .m-16 {
    margin: var(--spacing-200, 16px);
  }

  .m-24 {
    margin: var(--spacing-300, 24px);
  }

  .m-32 {
    margin: var(--spacing-400, 32px);
  }

  .m-40 {
    margin: var(--spacing-450, 40px);
  }

  .m-48 {
    margin: var(--spacing-500, 48px);
  }

  .m-64 {
    margin: var(--spacing-600, 64px);
  }

  .m-80 {
    margin: var(--spacing-700, 80px);
  }

  .m-96 {
    margin: var(--spacing-800, 96px);
  }

  .m-128 {
    margin: var(--spacing-900, 128px);
  }

  .m-160 {
    margin: var(--spacing-1000, 160px);
  }
  /*#endregion Margin > All Sides */
  /* ================================ */

  /*#region ||| Top & Bottom */
  /* ================================================================ */
  .my-0 {
    margin-top: var(--spacing-0, 0px);
    margin-bottom: var(--spacing-0, 0px);
  }

  .my-1 {
    margin-top: var(--spacing-10, 1px);
    margin-bottom: var(--spacing-10, 1px);
  }

  .my-2 {
    margin-top: var(--spacing-25, 2px);
    margin-bottom: var(--spacing-25, 2px);
  }

  .my-4 {
    margin-top: var(--spacing-50, 4px);
    margin-bottom: var(--spacing-50, 4px);
  }

  .my-6 {
    margin-top: var(--spacing-75, 6px);
    margin-bottom: var(--spacing-75, 6px);
  }

  .my-8 {
    margin-top: var(--spacing-100, 8px);
    margin-bottom: var(--spacing-100, 8px);
  }

  .my-16 {
    margin-top: var(--spacing-200, 16px);
    margin-bottom: var(--spacing-200, 16px);
  }

  .my-24 {
    margin-top: var(--spacing-300, 24px);
    margin-bottom: var(--spacing-300, 24px);
  }

  .my-32 {
    margin-top: var(--spacing-400, 32px);
    margin-bottom: var(--spacing-400, 32px);
  }

  .my-40 {
    margin-top: var(--spacing-450, 40px);
    margin-bottom: var(--spacing-450, 40px);
  }

  .my-48 {
    margin-top: var(--spacing-500, 48px);
    margin-bottom: var(--spacing-500, 48px);
  }

  .my-64 {
    margin-top: var(--spacing-600, 64px);
    margin-bottom: var(--spacing-600, 64px);
  }

  .my-80 {
    margin-top: var(--spacing-700, 80px);
    margin-bottom: var(--spacing-700, 80px);
  }

  .my-96 {
    margin-top: var(--spacing-800, 96px);
    margin-bottom: var(--spacing-800, 96px);
  }

  .my-128 {
    margin-top: var(--spacing-900, 128px);
    margin-bottom: var(--spacing-900, 128px);
  }

  .my-160 {
    margin-top: var(--spacing-1000, 160px);
    margin-bottom: var(--spacing-1000, 160px);
  }
  /*#endregion Top & Bottom */
  /* ================================ */

  /*#region ||| Left & Right */
  /* ================================================================ */
  .mx-0 {
    margin-right: var(--spacing-0, 0px);
    margin-left: var(--spacing-0, 0px);
  }

  .mx-1 {
    margin-right: var(--spacing-10, 1px);
    margin-left: var(--spacing-10, 1px);
  }

  .mx-2 {
    margin-right: var(--spacing-25, 2px);
    margin-left: var(--spacing-25, 2px);
  }

  .mx-4 {
    margin-right: var(--spacing-50, 4px);
    margin-left: var(--spacing-50, 4px);
  }

  .mx-6 {
    margin-right: var(--spacing-75, 6px);
    margin-left: var(--spacing-75, 6px);
  }

  .mx-8 {
    margin-right: var(--spacing-100, 8px);
    margin-left: var(--spacing-100, 8px);
  }

  .mx-16 {
    margin-right: var(--spacing-200, 16px);
    margin-left: var(--spacing-200, 16px);
  }

  .mx-24 {
    margin-right: var(--spacing-300, 24px);
    margin-left: var(--spacing-300, 24px);
  }

  .mx-32 {
    margin-right: var(--spacing-400, 32px);
    margin-left: var(--spacing-400, 32px);
  }

  .mx-40 {
    margin-right: var(--spacing-450, 40px);
    margin-left: var(--spacing-450, 40px);
  }

  .mx-48 {
    margin-right: var(--spacing-500, 48px);
    margin-left: var(--spacing-500, 48px);
  }

  .mx-64 {
    margin-right: var(--spacing-600, 64px);
    margin-left: var(--spacing-600, 64px);
  }

  .mx-80 {
    margin-right: var(--spacing-700, 80px);
    margin-left: var(--spacing-700, 80px);
  }

  .mx-96 {
    margin-right: var(--spacing-800, 96px);
    margin-left: var(--spacing-800, 96px);
  }

  .mx-128 {
    margin-right: var(--spacing-900, 128px);
    margin-left: var(--spacing-900, 128px);
  }

  .mx-160 {
    margin-right: var(--spacing-1000, 160px);
    margin-left: var(--spacing-1000, 160px);
  }
  /*#endregion Left & Right */
  /* ================================ */

  /*#region ||| Top */
  /* ================================================================ */
  .mt-0 {
    margin-top: var(--spacing-0, 0px);
  }

  .mt-1 {
    margin-top: var(--spacing-10, 1px);
  }

  .mt-2 {
    margin-top: var(--spacing-25, 2px);
  }

  .mt-4 {
    margin-top: var(--spacing-50, 4px);
  }

  .mt-6 {
    margin-top: var(--spacing-75, 6px);
  }

  .mt-8 {
    margin-top: var(--spacing-100, 8px);
  }

  .mt-16 {
    margin-top: var(--spacing-200, 16px);
  }

  .mt-24 {
    margin-top: var(--spacing-300, 24px);
  }

  .mt-32 {
    margin-top: var(--spacing-400, 32px);
  }

  .mt-40 {
    margin-top: var(--spacing-450, 40px);
  }

  .mt-48 {
    margin-top: var(--spacing-500, 48px);
  }

  .mt-64 {
    margin-top: var(--spacing-600, 64px);
  }

  .mt-80 {
    margin-top: var(--spacing-700, 80px);
  }

  .mt-96 {
    margin-top: var(--spacing-800, 96px);
  }

  .mt-128 {
    margin-top: var(--spacing-900, 128px);
  }

  .mt-160 {
    margin-top: var(--spacing-1000, 160px);
  }
  /*#endregion Top */
  /* ================================ */

  /*#region ||| Right */
  /* ================================================================ */
  .mr-0 {
    margin-right: var(--spacing-0, 0px);
  }

  .mr-1 {
    margin-right: var(--spacing-10, 1px);
  }

  .mr-2 {
    margin-right: var(--spacing-25, 2px);
  }

  .mr-4 {
    margin-right: var(--spacing-50, 4px);
  }

  .mr-6 {
    margin-right: var(--spacing-75, 6px);
  }

  .mr-8 {
    margin-right: var(--spacing-100, 8px);
  }

  .mr-16 {
    margin-right: var(--spacing-200, 16px);
  }

  .mr-24 {
    margin-right: var(--spacing-300, 24px);
  }

  .mr-32 {
    margin-right: var(--spacing-400, 32px);
  }

  .mr-40 {
    margin-right: var(--spacing-450, 40px);
  }

  .mr-48 {
    margin-right: var(--spacing-500, 48px);
  }

  .mr-64 {
    margin-right: var(--spacing-600, 64px);
  }

  .mr-80 {
    margin-right: var(--spacing-700, 80px);
  }

  .mr-96 {
    margin-right: var(--spacing-800, 96px);
  }

  .mr-128 {
    margin-right: var(--spacing-900, 128px);
  }

  .mr-160 {
    margin-right: var(--spacing-1000, 160px);
  }
  /*#endregion Right */
  /* ================================ */

  /*#region ||| Bottom */
  /* ================================================================ */
  .mb-0 {
    margin-bottom: var(--spacing-0, 0px);
  }

  .mb-1 {
    margin-bottom: var(--spacing-10, 1px);
  }

  .mb-2 {
    margin-bottom: var(--spacing-25, 2px);
  }

  .mb-4 {
    margin-bottom: var(--spacing-50, 4px);
  }

  .mb-6 {
    margin-bottom: var(--spacing-75, 6px);
  }

  .mb-8 {
    margin-bottom: var(--spacing-100, 8px);
  }

  .mb-16 {
    margin-bottom: var(--spacing-200, 16px);
  }

  .mb-24 {
    margin-bottom: var(--spacing-300, 24px);
  }

  .mb-32 {
    margin-bottom: var(--spacing-400, 32px);
  }

  .mb-40 {
    margin-bottom: var(--spacing-450, 40px);
  }

  .mb-48 {
    margin-bottom: var(--spacing-500, 48px);
  }

  .mb-64 {
    margin-bottom: var(--spacing-600, 64px);
  }

  .mb-80 {
    margin-bottom: var(--spacing-700, 80px);
  }

  .mb-96 {
    margin-bottom: var(--spacing-800, 96px);
  }

  .mb-128 {
    margin-bottom: var(--spacing-900, 128px);
  }

  .mb-160 {
    margin-bottom: var(--spacing-1000, 160px);
  }
  /*#endregion Bottom */
  /* ================================ */

  /*#region ||| Left */
  /* ================================================================ */
  .ml-0 {
    margin-right: var(--spacing-0, 0px);
  }

  .ml-1 {
    margin-right: var(--spacing-10, 1px);
  }

  .ml-2 {
    margin-right: var(--spacing-25, 2px);
  }

  .ml-4 {
    margin-right: var(--spacing-50, 4px);
  }

  .ml-6 {
    margin-right: var(--spacing-75, 6px);
  }

  .ml-8 {
    margin-right: var(--spacing-100, 8px);
  }

  .ml-16 {
    margin-right: var(--spacing-200, 16px);
  }

  .ml-24 {
    margin-right: var(--spacing-300, 24px);
  }

  .ml-32 {
    margin-right: var(--spacing-400, 32px);
  }

  .ml-40 {
    margin-right: var(--spacing-450, 40px);
  }

  .ml-48 {
    margin-right: var(--spacing-500, 48px);
  }

  .ml-64 {
    margin-right: var(--spacing-600, 64px);
  }

  .ml-80 {
    margin-right: var(--spacing-700, 80px);
  }

  .ml-96 {
    margin-right: var(--spacing-800, 96px);
  }

  .ml-128 {
    margin-right: var(--spacing-900, 128px);
  }

  .ml-160 {
    margin-right: var(--spacing-1000, 160px);
  }
  /*#endregion Left */
  /* ================================ */

  /*#endregion Margin */
  /* ================================ */

  /*#region || Padding */
  /* ================================================================ */

  /*#region ||| All Sides */
  /* ================================================================ */
  .p-0 {
    padding: var(--spacing-0, 0px);
  }

  .p-1 {
    padding: var(--spacing-10, 1px);
  }

  .p-2 {
    padding: var(--spacing-25, 2px);
  }

  .p-4 {
    padding: var(--spacing-50, 4px);
  }

  .p-6 {
    padding: var(--spacing-75, 6px);
  }

  .p-8 {
    padding: var(--spacing-100, 8px);
  }

  .p-16 {
    padding: var(--spacing-200, 16px);
  }

  .p-24 {
    padding: var(--spacing-300, 24px);
  }

  .p-32 {
    padding: var(--spacing-400, 32px);
  }

  .p-40 {
    padding: var(--spacing-450, 40px);
  }

  .p-48 {
    padding: var(--spacing-500, 48px);
  }

  .p-64 {
    padding: var(--spacing-600, 64px);
  }

  .p-80 {
    padding: var(--spacing-700, 80px);
  }

  .p-96 {
    padding: var(--spacing-800, 96px);
  }

  .p-128 {
    padding: var(--spacing-900, 128px);
  }

  .p-160 {
    padding: var(--spacing-1000, 160px);
  }
  /*#endregion All Sides */
  /* ================================ */

  /*#region ||| Top & Bottom */
  /* ================================================================ */
  .py-0 {
    padding-top: var(--spacing-0, 0px);
    padding-bottom: var(--spacing-0, 0px);
  }

  .py-1 {
    padding-top: var(--spacing-10, 1px);
    padding-bottom: var(--spacing-10, 1px);
  }

  .py-2 {
    padding-top: var(--spacing-25, 2px);
    padding-bottom: var(--spacing-25, 2px);
  }

  .py-4 {
    padding-top: var(--spacing-50, 4px);
    padding-bottom: var(--spacing-50, 4px);
  }

  .py-6 {
    padding-top: var(--spacing-75, 6px);
    padding-bottom: var(--spacing-75, 6px);
  }

  .py-8 {
    padding-top: var(--spacing-100, 8px);
    padding-bottom: var(--spacing-100, 8px);
  }

  .py-16 {
    padding-top: var(--spacing-200, 16px);
    padding-bottom: var(--spacing-200, 16px);
  }

  .py-24 {
    padding-top: var(--spacing-300, 24px);
    padding-bottom: var(--spacing-300, 24px);
  }

  .py-32 {
    padding-top: var(--spacing-400, 32px);
    padding-bottom: var(--spacing-400, 32px);
  }

  .py-40 {
    padding-top: var(--spacing-450, 40px);
    padding-bottom: var(--spacing-450, 40px);
  }

  .py-48 {
    padding-top: var(--spacing-500, 48px);
    padding-bottom: var(--spacing-500, 48px);
  }

  .py-64 {
    padding-top: var(--spacing-600, 64px);
    padding-bottom: var(--spacing-600, 64px);
  }

  .py-80 {
    padding-top: var(--spacing-700, 80px);
    padding-bottom: var(--spacing-700, 80px);
  }

  .py-96 {
    padding-top: var(--spacing-800, 96px);
    padding-bottom: var(--spacing-800, 96px);
  }

  .py-128 {
    padding-top: var(--spacing-900, 128px);
    padding-bottom: var(--spacing-900, 128px);
  }

  .py-160 {
    padding-top: var(--spacing-1000, 160px);
    padding-bottom: var(--spacing-1000, 160px);
  }
  /*#endregion Top & Bottom */
  /* ================================ */

  /*#region ||| Left & Right */
  /* ================================================================ */
  .px-0 {
    padding-right: var(--spacing-0, 0px);
    padding-left: var(--spacing-0, 0px);
  }

  .px-1 {
    padding-right: var(--spacing-10, 1px);
    padding-left: var(--spacing-10, 1px);
  }

  .px-2 {
    padding-right: var(--spacing-25, 2px);
    padding-left: var(--spacing-25, 2px);
  }

  .px-4 {
    padding-right: var(--spacing-50, 4px);
    padding-left: var(--spacing-50, 4px);
  }

  .px-6 {
    padding-right: var(--spacing-75, 6px);
    padding-left: var(--spacing-75, 6px);
  }

  .px-8 {
    padding-right: var(--spacing-100, 8px);
    padding-left: var(--spacing-100, 8px);
  }

  .px-16 {
    padding-right: var(--spacing-200, 16px);
    padding-left: var(--spacing-200, 16px);
  }

  .px-24 {
    padding-right: var(--spacing-300, 24px);
    padding-left: var(--spacing-300, 24px);
  }

  .px-32 {
    padding-right: var(--spacing-400, 32px);
    padding-left: var(--spacing-400, 32px);
  }

  .px-40 {
    padding-right: var(--spacing-450, 40px);
    padding-left: var(--spacing-450, 40px);
  }

  .px-48 {
    padding-right: var(--spacing-500, 48px);
    padding-left: var(--spacing-500, 48px);
  }

  .px-64 {
    padding-right: var(--spacing-600, 64px);
    padding-left: var(--spacing-600, 64px);
  }

  .px-80 {
    padding-right: var(--spacing-700, 80px);
    padding-left: var(--spacing-700, 80px);
  }

  .px-96 {
    padding-right: var(--spacing-800, 96px);
    padding-left: var(--spacing-800, 96px);
  }

  .px-128 {
    padding-right: var(--spacing-900, 128px);
    padding-left: var(--spacing-900, 128px);
  }

  .px-160 {
    padding-right: var(--spacing-1000, 160px);
    padding-left: var(--spacing-1000, 160px);
  }
  /*#endregion Left & Right */
  /* ================================ */

  /*#region ||| Top */
  /* ================================================================ */
  .pt-0 {
    padding-top: var(--spacing-0, 0px);
  }

  .pt-1 {
    padding-top: var(--spacing-10, 1px);
  }

  .pt-2 {
    padding-top: var(--spacing-25, 2px);
  }

  .pt-4 {
    padding-top: var(--spacing-50, 4px);
  }

  .pt-6 {
    padding-top: var(--spacing-75, 6px);
  }

  .pt-8 {
    padding-top: var(--spacing-100, 8px);
  }

  .pt-16 {
    padding-top: var(--spacing-200, 16px);
  }

  .pt-24 {
    padding-top: var(--spacing-300, 24px);
  }

  .pt-32 {
    padding-top: var(--spacing-400, 32px);
  }

  .pt-40 {
    padding-top: var(--spacing-450, 40px);
  }

  .pt-48 {
    padding-top: var(--spacing-500, 48px);
  }

  .pt-64 {
    padding-top: var(--spacing-600, 64px);
  }

  .pt-80 {
    padding-top: var(--spacing-700, 80px);
  }

  .pt-96 {
    padding-top: var(--spacing-800, 96px);
  }

  .pt-128 {
    padding-top: var(--spacing-900, 128px);
  }

  .pt-160 {
    padding-top: var(--spacing-1000, 160px);
  }
  /*#endregion Top */
  /* ================================ */

  /*#region ||| Right */
  /* ================================================================ */
  .pr-0 {
    padding-right: var(--spacing-0, 0px);
  }

  .pr-1 {
    padding-right: var(--spacing-10, 1px);
  }

  .pr-2 {
    padding-right: var(--spacing-25, 2px);
  }

  .pr-4 {
    padding-right: var(--spacing-50, 4px);
  }

  .pr-6 {
    padding-right: var(--spacing-75, 6px);
  }

  .pr-8 {
    padding-right: var(--spacing-100, 8px);
  }

  .pr-16 {
    padding-right: var(--spacing-200, 16px);
  }

  .pr-24 {
    padding-right: var(--spacing-300, 24px);
  }

  .pr-32 {
    padding-right: var(--spacing-400, 32px);
  }

  .pr-40 {
    padding-right: var(--spacing-450, 40px);
  }

  .pr-48 {
    padding-right: var(--spacing-500, 48px);
  }

  .pr-64 {
    padding-right: var(--spacing-600, 64px);
  }

  .pr-80 {
    padding-right: var(--spacing-700, 80px);
  }

  .pr-96 {
    padding-right: var(--spacing-800, 96px);
  }

  .pr-128 {
    padding-right: var(--spacing-900, 128px);
  }

  .pr-160 {
    padding-right: var(--spacing-1000, 160px);
  }
  /*#endregion Right */
  /* ================================ */

  /*#region ||| Bottom */
  /* ================================================================ */
  .pb-0 {
    padding-bottom: var(--spacing-0, 0px);
  }

  .pb-1 {
    padding-bottom: var(--spacing-10, 1px);
  }

  .pb-2 {
    padding-bottom: var(--spacing-25, 2px);
  }

  .pb-4 {
    padding-bottom: var(--spacing-50, 4px);
  }

  .pb-6 {
    padding-bottom: var(--spacing-75, 6px);
  }

  .pb-8 {
    padding-bottom: var(--spacing-100, 8px);
  }

  .pb-16 {
    padding-bottom: var(--spacing-200, 16px);
  }

  .pb-24 {
    padding-bottom: var(--spacing-300, 24px);
  }

  .pb-32 {
    padding-bottom: var(--spacing-400, 32px);
  }

  .pb-40 {
    padding-bottom: var(--spacing-450, 40px);
  }

  .pb-48 {
    padding-bottom: var(--spacing-500, 48px);
  }

  .pb-64 {
    padding-bottom: var(--spacing-600, 64px);
  }

  .pb-80 {
    padding-bottom: var(--spacing-700, 80px);
  }

  .pb-96 {
    padding-bottom: var(--spacing-800, 96px);
  }

  .pb-128 {
    padding-bottom: var(--spacing-900, 128px);
  }

  .pb-160 {
    padding-bottom: var(--spacing-1000, 160px);
  }
  /*#endregion Bottom */
  /* ================================ */

  /*#region ||| Left */
  /* ================================================================ */
  .pl-0 {
    padding-right: var(--spacing-0, 0px);
  }

  .pl-1 {
    padding-right: var(--spacing-10, 1px);
  }

  .pl-2 {
    padding-right: var(--spacing-25, 2px);
  }

  .pl-4 {
    padding-right: var(--spacing-50, 4px);
  }

  .pl-6 {
    padding-right: var(--spacing-75, 6px);
  }

  .pl-8 {
    padding-right: var(--spacing-100, 8px);
  }

  .pl-16 {
    padding-right: var(--spacing-200, 16px);
  }

  .pl-24 {
    padding-right: var(--spacing-300, 24px);
  }

  .pl-32 {
    padding-right: var(--spacing-400, 32px);
  }

  .pl-40 {
    padding-right: var(--spacing-450, 40px);
  }

  .pl-48 {
    padding-right: var(--spacing-500, 48px);
  }

  .pl-64 {
    padding-right: var(--spacing-600, 64px);
  }

  .pl-80 {
    padding-right: var(--spacing-700, 80px);
  }

  .pl-96 {
    padding-right: var(--spacing-800, 96px);
  }

  .pl-128 {
    padding-right: var(--spacing-900, 128px);
  }

  .pl-160 {
    padding-right: var(--spacing-1000, 160px);
  }
  /*#endregion Left */
  /* ================================ */

  /*#endregion Padding */
  /* ================================ */

  /*#endregion Spacing */
  /* ================================ */

  /*#region | Sizing */
  /* ================================================================ */

  /*#region || Size */
  /* ================================================================ */
  .size-auto {
    width: auto;
    height: auto;
  }

  .size-full {
    width: 100%;
    height: 100%;
  }

  .size-min {
    width: min-content;
    height: min-content;
  }

  .size-max {
    width: max-content;
    height: max-content;
  }

  .size-fit {
    width: fit-content;
    height: fit-content;
  }
  /*#endregion Size */
  /* ================================ */

  /*#region || Width */
  /* ================================================================ */
  .w-auto {
    width: auto;
  }

  .w-full {
    width: 100%;
  }

  .w-screen {
    width: 100vh;
  }

  .w-min {
    width: min-content;
  }

  .w-max {
    width: max-content;
  }

  .w-fit {
    width: fit-content;
  }
  /*#endregion Width */
  /* ================================ */

  /*#region || Min Width */
  /* ================================================================ */
  .min-w-auto {
    min-width: auto;
  }

  .min-w-full {
    min-width: 100%;
  }

  .min-w-screen {
    min-width: 100vh;
  }

  .min-w-min {
    min-width: min-content;
  }

  .min-w-max {
    min-width: max-content;
  }

  .min-w-fit {
    min-width: fit-content;
  }
  /*#endregion Min Width */
  /* ================================ */

  /*#region || Max Width */
  /* ================================================================ */
  .max-w-auto {
    max-width: auto;
  }

  .max-w-full {
    max-width: 100%;
  }

  .max-w-screen {
    max-width: 100vh;
  }

  .max-w-min {
    max-width: min-content;
  }

  .max-w-max {
    max-width: max-content;
  }

  .max-w-fit {
    max-width: fit-content;
  }
  /*#endregion Max Width */
  /* ================================ */

  /*#region || Height */
  /* ================================================================ */
  .h-auto {
    height: auto;
  }

  .h-full {
    height: 100%;
  }

  .h-screen {
    height: 100vh;
  }

  .h-min {
    height: min-content;
  }

  .h-max {
    height: max-content;
  }

  .h-fit {
    height: fit-content;
  }
  /*#endregion Height */
  /* ================================ */

  /*#region || Min Height */
  /* ================================================================ */
  .min-h-auto {
    min-height: auto;
  }

  .min-h-full {
    min-height: 100%;
  }

  .min-h-screen {
    min-height: 100vh;
  }

  .min-h-min {
    min-height: min-content;
  }

  .min-h-max {
    min-height: max-content;
  }

  .min-h-fit {
    min-height: fit-content;
  }
  /*#endregion Min Height */
  /* ================================ */

  /*#region || Max Height */
  /* ================================================================ */
  .max-h-auto {
    max-height: auto;
  }

  .max-h-full {
    max-height: 100%;
  }

  .max-h-screen {
    max-height: 100vh;
  }

  .max-h-min {
    max-height: min-content;
  }

  .max-h-max {
    max-height: max-content;
  }

  .max-h-fit {
    max-height: fit-content;
  }
  /*#endregion Max Height */
  /* ================================ */

  /*#endregion Sizing */
  /* ================================ */

  /*#region | Typography */
  /* ================================================================ */

  /*#region || Font Size */
  /* ================================================================ */
  :root {
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;
    --text-7xl: 4.5rem;
    --text-8xl: 6rem;
    --text-9xl: 8rem;
  }

  .text-xs {
    font-size: var(--text-xs);
  }

  .text-sm {
    font-size: var(--text-sm);
  }

  .text-base {
    font-size: var(--text-base);
  }

  .text-lg {
    font-size: var(--text-lg);
  }

  .text-xl {
    font-size: var(--text-xl);
  }

  .text-2xl {
    font-size: var(--text-2xl);
  }

  .text-3xl {
    font-size: var(--text-3xl);
  }

  .text-4xl {
    font-size: var(--text-4xl);
  }

  .text-5xl {
    font-size: var(--text-5xl);
  }

  .text-6xl {
    font-size: var(--text-6xl);
  }

  .text-7xl {
    font-size: var(--text-7xl);
  }

  .text-8xl {
    font-size: var(--text-8xl);
  }

  .text-9xl {
    font-size: var(--text-9xl);
  }

  /*#endregion Font Size */
  /* ================================ */

  /*#region || Color */
  /* ================================================================ */
  .text-white {
    color: white;
  }

  .text-grey-900 {
    color: var(--grey-900, #252525);
  }
  /*#endregion Color */
  /* ================================ */

  /*#region || Text Wrap */
  /* ================================================================ */
  .text-wrap {
    text-wrap: wrap;
  }

  .text-nowrap {
    text-wrap: nowrap;
  }

  .text-balance {
    text-wrap: balance;
  }

  .text-pretty {
    text-wrap: pretty;
  }
  /*#endregion Text Wrap */
  /* ================================ */

  /*#endregion Typography */
  /* ================================ */

  /*#region Misc & Unsorted */
  /* ================================================================ */

  /* Responsive Small Margin
  ================================================ */
  @media screen and (min-width: 640px) {
    .sm-mb-0 {
      margin-bottom: var(--spacing-0, 0px);
    }

    .screen-sm__mb-8 {
      margin-bottom: var(--spacing-100, 8px);
    }

    .screen-sm__-mb-8 {
      margin-bottom: calc(var(--spacing-100, 8px) * -1);
    }
  }

  .container-width-1200 {
    max-width: calc(1200px + (10px * 2));
    padding-left: 10px;
    padding-right: 10px;
  }
  /*#endregion Misc */
  /* ================================ */
}