@import '../variables';
@import '../mixins';

//  add a prefix to all the utility classes
$util-prefix: 'u-' !default;
$font-size-s: 0.75rem;
$font-size: 0.875rem;
$font-size-md: 1rem;

// form elements
.#{$util-prefix}text-align-left {
  text-align: left;
}

.#{$util-prefix}margin-bottom-half {
  margin-bottom: 0.5rem;
}

.#{$util-prefix}margin-bottom-one {
  margin-bottom: 1rem;
}

.#{$util-prefix}margin-bottom-one-point-five {
  margin-bottom: 1.5rem;
}

.#{$util-prefix}display-block {
  display: block;
}

.#{$util-prefix}text-small {
  font-size: $font-size-s;
  line-height: $font-size-md;

  @include breakpoint('min-width', 'md') {
    font-size: $font-size;
  }
}

// common
.#{$util-prefix}margin-y-two-point-five {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.#{$util-prefix}padding-two-point-five {
  padding: 2.5rem;
}

// typography
.#{$util-prefix}grey-text {
  color: get-map($default-colors, 'n600');
}

.#{$util-prefix}error-text {
  color: get-map($default-colors, 'error600');
}

// variables
// flexbox
.#{$util-prefix}flex {
  display: flex;
}
.#{$util-prefix}inline-flex {
  display: inline-flex;
}
.#{$util-prefix}flex-wrap {
  flex-wrap: wrap;
}
.#{$util-prefix}flex-nowrap {
  flex-wrap: nowrap;
}
.#{$util-prefix}flex-col {
  flex-direction: column;
}
.#{$util-prefix}flex-col-reverse {
  flex-direction: column-reverse;
}
.#{$util-prefix}flex-row {
  flex-direction: row;
}
.#{$util-prefix}flex-row-reverse {
  flex-direction: row-reverse;
}
.#{$util-prefix}flex-center {
  justify-content: center;
  align-items: center;
}
.#{$util-prefix}flex-grow {
  flex-grow: 1;
}
.#{$util-prefix}flex-grow-0 {
  flex-grow: 0;
}
.#{$util-prefix}flex-shrink {
  flex-shrink: 1;
}
.#{$util-prefix}flex-shrink-0 {
  flex-shrink: 0;
}
.#{$util-prefix}flex-basis-0 {
  flex-basis: 0;
}

// justify-content
.#{$util-prefix}justify-start {
  justify-content: flex-start;
}
.#{$util-prefix}justify-end {
  justify-content: flex-end;
}
.#{$util-prefix}justify-center {
  justify-content: center;
}
.#{$util-prefix}justify-between {
  justify-content: space-between;
}

// align-items
.#{$util-prefix}items-center {
  align-items: center;
}
.#{$util-prefix}items-start {
  align-items: start;
}
.#{$util-prefix}items-end {
  align-items: end;
}
.#{$util-prefix}items-baseline {
  align-items: baseline;
}
.#{$util-prefix}items-stretch {
  align-items: stretch;
}

// align-content
.#{$util-prefix}content-start {
  align-content: start;
}
.#{$util-prefix}content-end {
  align-content: end;
}
.#{$util-prefix}content-center {
  align-content: center;
}
.#{$util-prefix}content-between {
  align-content: space-between;
}

// display
.#{$util-prefix}block {
  display: block;
}
.#{$util-prefix}inline-block {
  display: inline-block;
}
.#{$util-prefix}inline {
  display: inline;
}
.#{$util-prefix}contents {
  display: contents;
}
.#{$util-prefix}grid {
  display: grid;
}
.#{$util-prefix}inline-grid {
  display: inline-grid;
}
.#{$util-prefix}hidden {
  display: none;
}

// margin
.#{$util-prefix}m-auto {
  margin: auto;
}
.#{$util-prefix}m-0 {
  margin: 0;
}
.#{$util-prefix}my-auto {
  margin-top: auto;
  margin-bottom: auto;
}
.#{$util-prefix}my-0 {
  margin-top: 0;
  margin-bottom: 0;
}
.#{$util-prefix}mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.#{$util-prefix}mx-0 {
  margin-left: 0;
  margin-right: 0;
}
.#{$util-prefix}mt-auto {
  margin-top: auto;
}
.#{$util-prefix}mt-0 {
  margin-top: 0;
}
.#{$util-prefix}mr-auto {
  margin-right: auto;
}
.#{$util-prefix}mr-0 {
  margin-right: 0;
}
.#{$util-prefix}mb-auto {
  margin-bottom: auto;
}
.#{$util-prefix}mb-0 {
  margin-bottom: 0;
}
.#{$util-prefix}ml-auto {
  margin-left: auto;
}
.#{$util-prefix}ml-0 {
  margin-left: 0;
}

// padding
.#{$util-prefix}py-0 {
  padding-top: 0;
  padding-bottom: 0;
}
.#{$util-prefix}px-0 {
  padding-left: 0;
  padding-right: 0;
}
.#{$util-prefix}pt-0 {
  padding-top: 0;
}
.#{$util-prefix}pr-0 {
  padding-right: 0;
}
.#{$util-prefix}pb-0 {
  padding-bottom: 0;
}
.#{$util-prefix}pl-0 {
  padding-left: 0;
}

// vertical-align
.#{$util-prefix}align-baseline {
  vertical-align: baseline;
}
.#{$util-prefix}align-sub {
  vertical-align: sub;
}
.#{$util-prefix}align-super {
  vertical-align: super;
}
.#{$util-prefix}align-text-top {
  vertical-align: text-top;
}
.#{$util-prefix}align-text-bottom {
  vertical-align: text-bottom;
}
.#{$util-prefix}align-top {
  vertical-align: top;
}
.#{$util-prefix}align-middle {
  vertical-align: middle;
}
.#{$util-prefix}align-bottom {
  vertical-align: bottom;
}

// typography
.#{$util-prefix}truncate,
.#{$util-prefix}text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.#{$util-prefix}text-replace {
  overflow: hidden;
  color: transparent;
  text-indent: 100%;
  white-space: nowrap;
}
.#{$util-prefix}break-word {
  overflow-wrap: break-word;
  min-width: 0;
}

// text-transform
.#{$util-prefix}uppercase {
  text-transform: uppercase;
}
.#{$util-prefix}capitalize {
  text-transform: capitalize;
}

// text-align
.#{$util-prefix}text-center {
  text-align: center;
}
.#{$util-prefix}text-left {
  text-align: left;
}
.#{$util-prefix}text-right {
  text-align: right;
}
.#{$util-prefix}text-justify {
  text-align: justify;
}

// text-decoration
.#{$util-prefix}line-through {
  text-decoration: line-through;
}
.#{$util-prefix}underline {
  text-decoration: underline;
}
.#{$util-prefix}text-decoration-none {
  text-decoration: none;
}

// cursor
.#{$util-prefix}cursor-pointer {
  cursor: pointer;
}
.#{$util-prefix}cursor-default {
  cursor: default;
}

// pointer-events
.#{$util-prefix}pointer-events-auto {
  pointer-events: auto;
}
.#{$util-prefix}pointer-events-none {
  pointer-events: none;
}

// min-height
.#{$util-prefix}min-h-0 {
  min-height: 0;
}
.#{$util-prefix}min-h-full {
  min-height: 100%;
}
.#{$util-prefix}min-h-screen {
  min-height: 100vh;
}

// max-height
.#{$util-prefix}max-h-full {
  max-height: 100%;
}
.#{$util-prefix}max-h-screen {
  max-height: 100vh;
}

// position
.#{$util-prefix}relative {
  position: relative;
}
.#{$util-prefix}absolute {
  position: absolute;
}
.#{$util-prefix}fixed {
  position: fixed;
}
.#{$util-prefix}sticky {
  position: sticky;
}
.#{$util-prefix}static {
  position: static;
}
.#{$util-prefix}inset-0 {
  inset: 0;
}

// z-index
.#{$util-prefix}z-0 {
  z-index: 0;
}
.#{$util-prefix}z-1 {
  z-index: 1;
}
.#{$util-prefix}z-2 {
  z-index: 2;
}
.#{$util-prefix}z-3 {
  z-index: 3;
}

// overflow
.#{$util-prefix}overflow-visible {
  overflow: visible;
}
.#{$util-prefix}overflow-hidden {
  overflow: hidden;
}
.#{$util-prefix}overflow-x-hidden {
  overflow-x: hidden;
}
.#{$util-prefix}overflow-y-hidden {
  overflow-y: hidden;
}
.#{$util-prefix}overflow-clip {
  overflow: clip;
}
.#{$util-prefix}overflow-x-clip {
  overflow-x: clip;
}
.#{$util-prefix}overflow-y-clip {
  overflow-y: clip;
}
.#{$util-prefix}overflow-auto {
  overflow: auto;
}
.#{$util-prefix}momentum-scrolling {
  -webkit-overflow-scrolling: touch;
}

// overscroll-behavior
.#{$util-prefix}overscroll-contain {
  overscroll-behavior: contain;
}

// scroll behavior
.#{$util-prefix}scroll-smooth {
  scroll-behavior: smooth;
}

// opacity
.#{$util-prefix}opacity-0 {
  opacity: 0;
}
.#{$util-prefix}opacity-25 {
  opacity: 0.25;
}
.#{$util-prefix}opacity-50 {
  opacity: 0.5;
}
.#{$util-prefix}opacity-75 {
  opacity: 0.75;
}
.#{$util-prefix}opacity-100 {
  opacity: 1;
}
.#{$util-prefix}border-dotted {
  border-style: dotted;
}
.#{$util-prefix}border-dashed {
  border-style: dashed;
}

// object-fit
.#{$util-prefix}object-contain {
  object-fit: contain;
}
.#{$util-prefix}object-cover {
  object-fit: cover;
}

// transform
.#{$util-prefix}rotate-90 {
  rotate: 90deg;
}
.#{$util-prefix}rotate-180 {
  rotate: 180deg;
}
.#{$util-prefix}rotate-270 {
  rotate: 270deg;
}

// transform-origin
.#{$util-prefix}origin-center {
  transform-origin: center;
}
.#{$util-prefix}origin-top {
  transform-origin: center top;
}
.#{$util-prefix}origin-right {
  transform-origin: right center;
}
.#{$util-prefix}origin-bottom {
  transform-origin: center bottom;
}
.#{$util-prefix}origin-left {
  transform-origin: left center;
}
.#{$util-prefix}origin-top-left {
  transform-origin: left top;
}
.#{$util-prefix}origin-top-right {
  transform-origin: right top;
}
.#{$util-prefix}origin-bottom-left {
  transform-origin: left bottom;
}
.#{$util-prefix}origin-bottom-right {
  transform-origin: right bottom;
}

// visibility
.#{$util-prefix}visible {
  visibility: visible;
}
.#{$util-prefix}invisible {
  visibility: hidden;
}

// width
.#{$util-prefix}w-full {
  width: 100%;
}

// max-width
.#{$util-prefix}max-w-0 {
  max-width: 0;
}
.#{$util-prefix}max-w-px {
  max-width: 1px;
}
.#{$util-prefix}max-w-0-5 {
  max-width: 0.125rem; /* 2px */
}
.#{$util-prefix}max-w-1 {
  max-width: 0.25rem; /* 4px */
}
.#{$util-prefix}max-w-1-5 {
  max-width: 0.375rem; /* 6px */
}
.#{$util-prefix}max-w-2 {
  max-width: 0.5rem; /* 8px */
}
.#{$util-prefix}max-w-2-5 {
  max-width: 0.625rem; /* 10px */
}
.#{$util-prefix}max-w-3 {
  max-width: 0.75rem; /* 12px */
}
.#{$util-prefix}max-w-3-5 {
  max-width: 0.875rem; /* 14px */
}
.#{$util-prefix}max-w-4 {
  max-width: 1rem; /* 16px */
}
.#{$util-prefix}max-w-5 {
  max-width: 1.25rem; /* 20px */
}
.#{$util-prefix}max-w-6 {
  max-width: 1.5rem; /* 24px */
}
.#{$util-prefix}max-w-7 {
  max-width: 1.75rem; /* 28px */
}
.#{$util-prefix}max-w-8 {
  max-width: 2rem; /* 32px */
}
.#{$util-prefix}max-w-9 {
  max-width: 2.25rem; /* 36px */
}
.#{$util-prefix}max-w-10 {
  max-width: 2.5rem; /* 40px */
}
.#{$util-prefix}max-w-11 {
  max-width: 2.75rem; /* 44px */
}
.#{$util-prefix}max-w-12 {
  max-width: 3rem; /* 48px */
}
.#{$util-prefix}max-w-14 {
  max-width: 3.5rem; /* 56px */
}
.#{$util-prefix}max-w-16 {
  max-width: 4rem; /* 64px */
}
.#{$util-prefix}max-w-20 {
  max-width: 5rem; /* 80px */
}
.#{$util-prefix}max-w-24 {
  max-width: 6rem; /* 96px */
}
.#{$util-prefix}max-w-28 {
  max-width: 7rem; /* 112px */
}
.#{$util-prefix}max-w-32 {
  max-width: 8rem; /* 128px */
}
.#{$util-prefix}max-w-36 {
  max-width: 9rem; /* 144px */
}
.#{$util-prefix}max-w-40 {
  max-width: 10rem; /* 160px */
}
.#{$util-prefix}max-w-44 {
  max-width: 11rem; /* 176px */
}
.#{$util-prefix}max-w-48 {
  max-width: 12rem; /* 192px */
}
.#{$util-prefix}max-w-52 {
  max-width: 13rem; /* 208px */
}
.#{$util-prefix}max-w-56 {
  max-width: 14rem; /* 224px */
}
.#{$util-prefix}max-w-60 {
  max-width: 15rem; /* 240px */
}
.#{$util-prefix}max-w-64 {
  max-width: 16rem; /* 256px */
}
.#{$util-prefix}max-w-72 {
  max-width: 18rem; /* 288px */
}
.#{$util-prefix}max-w-80 {
  max-width: 20rem; /* 320px */
}
.#{$util-prefix}max-w-96 {
  max-width: 24rem; /* 384px */
}

// Named max-width utilities
.#{$util-prefix}max-w-none {
  max-width: none;
}
.#{$util-prefix}max-w-xs {
  max-width: 20rem; /* 320px */
}
.#{$util-prefix}max-w-sm {
  max-width: 24rem; /* 384px */
}
.#{$util-prefix}max-w-md {
  max-width: 28rem; /* 448px */
}
.#{$util-prefix}max-w-lg {
  max-width: 32rem; /* 512px */
}
.#{$util-prefix}max-w-xl {
  max-width: 36rem; /* 576px */
}
.#{$util-prefix}max-w-2xl {
  max-width: 42rem; /* 672px */
}
.#{$util-prefix}max-w-3xl {
  max-width: 48rem; /* 768px */
}
.#{$util-prefix}max-w-4xl {
  max-width: 56rem; /* 896px */
}
.#{$util-prefix}max-w-5xl {
  max-width: 64rem; /* 1024px */
}
.#{$util-prefix}max-w-6xl {
  max-width: 72rem; /* 1152px */
}
.#{$util-prefix}max-w-7xl {
  max-width: 80rem; /* 1280px */
}

// Special max-width utilities
.#{$util-prefix}max-w-full {
  max-width: 100%;
}
.#{$util-prefix}max-w-min {
  max-width: min-content;
}
.#{$util-prefix}max-w-max {
  max-width: max-content;
}
.#{$util-prefix}max-w-fit {
  max-width: fit-content;
}
.#{$util-prefix}max-w-prose {
  max-width: 65ch;
}

// Screen size max-width utilities
.#{$util-prefix}max-w-screen-sm {
  max-width: 640px;
}
.#{$util-prefix}max-w-screen-md {
  max-width: 768px;
}
.#{$util-prefix}max-w-screen-lg {
  max-width: 1024px;
}
.#{$util-prefix}max-w-screen-xl {
  max-width: 1280px;
}
.#{$util-prefix}max-w-screen-2xl {
  max-width: 1536px;
}

// Gap utilities
.#{$util-prefix}gap-0 {
  gap: 0;
}
.#{$util-prefix}gap-x-0 {
  column-gap: 0;
}
.#{$util-prefix}gap-y-0 {
  row-gap: 0;
}
.#{$util-prefix}gap-px {
  gap: 1px;
}
.#{$util-prefix}gap-x-px {
  column-gap: 1px;
}
.#{$util-prefix}gap-y-px {
  row-gap: 1px;
}
.#{$util-prefix}gap-0-5 {
  gap: 0.125rem; /* 2px */
}
.#{$util-prefix}gap-x-0-5 {
  column-gap: 0.125rem; /* 2px */
}
.#{$util-prefix}gap-y-0-5 {
  row-gap: 0.125rem; /* 2px */
}
.#{$util-prefix}gap-1 {
  gap: 0.25rem; /* 4px */
}
.#{$util-prefix}gap-x-1 {
  column-gap: 0.25rem; /* 4px */
}
.#{$util-prefix}gap-y-1 {
  row-gap: 0.25rem; /* 4px */
}
.#{$util-prefix}gap-1-5 {
  gap: 0.375rem; /* 6px */
}
.#{$util-prefix}gap-x-1-5 {
  column-gap: 0.375rem; /* 6px */
}
.#{$util-prefix}gap-y-1-5 {
  row-gap: 0.375rem; /* 6px */
}
.#{$util-prefix}gap-2 {
  gap: 0.5rem; /* 8px */
}
.#{$util-prefix}gap-x-2 {
  column-gap: 0.5rem; /* 8px */
}
.#{$util-prefix}gap-y-2 {
  row-gap: 0.5rem; /* 8px */
}
.#{$util-prefix}gap-2-5 {
  gap: 0.625rem; /* 10px */
}
.#{$util-prefix}gap-x-2-5 {
  column-gap: 0.625rem; /* 10px */
}
.#{$util-prefix}gap-y-2-5 {
  row-gap: 0.625rem; /* 10px */
}
.#{$util-prefix}gap-3 {
  gap: 0.75rem; /* 12px */
}
.#{$util-prefix}gap-x-3 {
  column-gap: 0.75rem; /* 12px */
}
.#{$util-prefix}gap-y-3 {
  row-gap: 0.75rem; /* 12px */
}
.#{$util-prefix}gap-3-5 {
  gap: 0.875rem; /* 14px */
}
.#{$util-prefix}gap-x-3-5 {
  column-gap: 0.875rem; /* 14px */
}
.#{$util-prefix}gap-y-3-5 {
  row-gap: 0.875rem; /* 14px */
}
.#{$util-prefix}gap-4 {
  gap: 1rem; /* 16px */
}
.#{$util-prefix}gap-x-4 {
  column-gap: 1rem; /* 16px */
}
.#{$util-prefix}gap-y-4 {
  row-gap: 1rem; /* 16px */
}
.#{$util-prefix}gap-5 {
  gap: 1.25rem; /* 20px */
}
.#{$util-prefix}gap-x-5 {
  column-gap: 1.25rem; /* 20px */
}
.#{$util-prefix}gap-y-5 {
  row-gap: 1.25rem; /* 20px */
}
.#{$util-prefix}gap-6 {
  gap: 1.5rem; /* 24px */
}
.#{$util-prefix}gap-x-6 {
  column-gap: 1.5rem; /* 24px */
}
.#{$util-prefix}gap-y-6 {
  row-gap: 1.5rem; /* 24px */
}
.#{$util-prefix}gap-7 {
  gap: 1.75rem; /* 28px */
}
.#{$util-prefix}gap-x-7 {
  column-gap: 1.75rem; /* 28px */
}
.#{$util-prefix}gap-y-7 {
  row-gap: 1.75rem; /* 28px */
}
.#{$util-prefix}gap-8 {
  gap: 2rem; /* 32px */
}
.#{$util-prefix}gap-x-8 {
  column-gap: 2rem; /* 32px */
}
.#{$util-prefix}gap-y-8 {
  row-gap: 2rem; /* 32px */
}
.#{$util-prefix}gap-9 {
  gap: 2.25rem; /* 36px */
}
.#{$util-prefix}gap-x-9 {
  column-gap: 2.25rem; /* 36px */
}
.#{$util-prefix}gap-y-9 {
  row-gap: 2.25rem; /* 36px */
}
.#{$util-prefix}gap-10 {
  gap: 2.5rem; /* 40px */
}
.#{$util-prefix}gap-x-10 {
  column-gap: 2.5rem; /* 40px */
}
.#{$util-prefix}gap-y-10 {
  row-gap: 2.5rem; /* 40px */
}
.#{$util-prefix}gap-11 {
  gap: 2.75rem; /* 44px */
}
.#{$util-prefix}gap-x-11 {
  column-gap: 2.75rem; /* 44px */
}
.#{$util-prefix}gap-y-11 {
  row-gap: 2.75rem; /* 44px */
}
.#{$util-prefix}gap-12 {
  gap: 3rem; /* 48px */
}
.#{$util-prefix}gap-x-12 {
  column-gap: 3rem; /* 48px */
}
.#{$util-prefix}gap-y-12 {
  row-gap: 3rem; /* 48px */
}
.#{$util-prefix}gap-14 {
  gap: 3.5rem; /* 56px */
}
.#{$util-prefix}gap-x-14 {
  column-gap: 3.5rem; /* 56px */
}
.#{$util-prefix}gap-y-14 {
  row-gap: 3.5rem; /* 56px */
}
.#{$util-prefix}gap-16 {
  gap: 4rem; /* 64px */
}
.#{$util-prefix}gap-x-16 {
  column-gap: 4rem; /* 64px */
}
.#{$util-prefix}gap-y-16 {
  row-gap: 4rem; /* 64px */
}
.#{$util-prefix}gap-20 {
  gap: 5rem; /* 80px */
}
.#{$util-prefix}gap-x-20 {
  column-gap: 5rem; /* 80px */
}
.#{$util-prefix}gap-y-20 {
  row-gap: 5rem; /* 80px */
}
.#{$util-prefix}gap-24 {
  gap: 6rem; /* 96px */
}
.#{$util-prefix}gap-x-24 {
  column-gap: 6rem; /* 96px */
}
.#{$util-prefix}gap-y-24 {
  row-gap: 6rem; /* 96px */
}
.#{$util-prefix}gap-28 {
  gap: 7rem; /* 112px */
}
.#{$util-prefix}gap-x-28 {
  column-gap: 7rem; /* 112px */
}
.#{$util-prefix}gap-y-28 {
  row-gap: 7rem; /* 112px */
}
.#{$util-prefix}gap-32 {
  gap: 8rem; /* 128px */
}
.#{$util-prefix}gap-x-32 {
  column-gap: 8rem; /* 128px */
}
.#{$util-prefix}gap-y-32 {
  row-gap: 8rem; /* 128px */
}
.#{$util-prefix}gap-36 {
  gap: 9rem; /* 144px */
}
.#{$util-prefix}gap-x-36 {
  column-gap: 9rem; /* 144px */
}
.#{$util-prefix}gap-y-36 {
  row-gap: 9rem; /* 144px */
}
.#{$util-prefix}gap-40 {
  gap: 10rem; /* 160px */
}
.#{$util-prefix}gap-x-40 {
  column-gap: 10rem; /* 160px */
}
.#{$util-prefix}gap-y-40 {
  row-gap: 10rem; /* 160px */
}
.#{$util-prefix}gap-44 {
  gap: 11rem; /* 176px */
}
.#{$util-prefix}gap-x-44 {
  column-gap: 11rem; /* 176px */
}
.#{$util-prefix}gap-y-44 {
  row-gap: 11rem; /* 176px */
}
.#{$util-prefix}gap-48 {
  gap: 12rem; /* 192px */
}
.#{$util-prefix}gap-x-48 {
  column-gap: 12rem; /* 192px */
}
.#{$util-prefix}gap-y-48 {
  row-gap: 12rem; /* 192px */
}
.#{$util-prefix}gap-52 {
  gap: 13rem; /* 208px */
}
.#{$util-prefix}gap-x-52 {
  column-gap: 13rem; /* 208px */
}
.#{$util-prefix}gap-y-52 {
  row-gap: 13rem; /* 208px */
}
.#{$util-prefix}gap-56 {
  gap: 14rem; /* 224px */
}
.#{$util-prefix}gap-x-56 {
  column-gap: 14rem; /* 224px */
}
.#{$util-prefix}gap-y-56 {
  row-gap: 14rem; /* 224px */
}
.#{$util-prefix}gap-60 {
  gap: 15rem; /* 240px */
}
.#{$util-prefix}gap-x-60 {
  column-gap: 15rem; /* 240px */
}
.#{$util-prefix}gap-y-60 {
  row-gap: 15rem; /* 240px */
}
.#{$util-prefix}gap-64 {
  gap: 16rem; /* 256px */
}
.#{$util-prefix}gap-x-64 {
  column-gap: 16rem; /* 256px */
}
.#{$util-prefix}gap-y-64 {
  row-gap: 16rem; /* 256px */
}
.#{$util-prefix}gap-72 {
  gap: 18rem; /* 288px */
}
.#{$util-prefix}gap-x-72 {
  column-gap: 18rem; /* 288px */
}
.#{$util-prefix}gap-y-72 {
  row-gap: 18rem; /* 288px */
}
