.mobile-hidden {
  display: none;
  @media screen and (min-width: 768px) {
    display: block;
  }
}

.desktop-hidden {
  display: block;
  @media screen and (min-width: 768px) {
    display: none;
  }
}

.flex {
  display: flex;
  align-items: center;
  gap: 0.5rem;

  @media screen and (min-width: 768px) {
    gap: 1rem;
  }

  &.col {
    flex-direction: column;
  }

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

  &.center {
    justify-content: center;
  }

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

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

  &.items-start {
    align-items: flex-start;
  }

  &.mobile-col {
    flex-direction: column;
    @media screen and (min-width: 768px) {
      flex-direction: row;
    }
  }
}

.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}

.w-full {
  width: 100%;
}

.grow {
  flex-grow: 1;
}

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

.text-primary-blue {
  color: var(--color-primary-blue);
}

.bg-primary-blue {
  background-color: var(--color-primary-blue);
}

.bg-secondary-blue {
  background-color: var(--color-secondary-blue);
}

.bg-secondary-green {
  background-color: var(--color-secondary-green);
}

.bg-secondary-yellow {
  background-color: var(--color-secondary-yellow);
}

.bg-secondary-yellow-hover {
  background-color: var(--color-secondary-yellow-hover);
}

.text-gray {
  color: var(--color-gray);
}

.gap-md {
  gap: 2rem;
  @media screen and (min-width: 1024px) {
    gap: 4rem;
  }
}
.how-to-work-grid {
  gap: 0rem !important;
  padding-bottom: 6rem !important;
  @media screen and (min-width: 768px) {
    gap: 2rem !important;
    padding-bottom: 0rem !important;
  }
  @media screen and (min-width: 1024px) {
    gap: 4rem !important;
  }
}
.pt-sm {
  padding-top: 2rem;
}
.pb-sm {
  padding-bottom: 2rem;
}
.mb-md {
  margin-bottom: 4rem;
}
.right-0 {
  right: 0;
}
.bottom-0 {
  bottom: 0;
}

.mobile-hidden {
  display: none;
  @media screen and (min-width: 768px) {
    display: block;
  }
}

.desktop-hidden {
  display: block;
  @media screen and (min-width: 768px) {
    display: none;
  }
}

.absolute {
  position: absolute;
}