.w-1 {
  width: 1rem;
}
.h-1 {
  height: 1rem;
}
.\@w-1 {
  width: 1em;
}
.\@h-1 {
  height: 1em;
}

.w-1\.5,
.w-3\/2
{
  width: 1.5rem;
}
.h-1\.5,
.h-3\/2
{
  height: 1.5rem;
}
.h-2 {
  height: 2rem;
}
.w-2 {
  width: 2rem;
}
.w-3 {
  width: 3rem;
}
.h-3 {
  height: 3rem;
}
.w-4 {
  width: 4rem;
  min-width: 4rem; // flex-grow
}
.h-4 {
  height: 4rem;
}
.w-5 {
  width: 5rem;
}
.h-5 {
  height: 5rem;
}
.w-6 {
  width: 6rem;
}
.h-6 {
  height: 6rem;
}
.h-8 {
  height: 8rem;
}
.h-10 {
  height: 10rem;
}
.w-16 {
  width: 16rem;
}
.h-20 {
  height: 20rem;
}

.w-auto {
  width: auto;
}
.w-full {
  width: 100%;
}
.w-screen {
  width: 100vw;
}
.w-fit {
  width: fit-content;
}
.w-content {
  width: fit-content;
}
.h-screen {
  height: 100vh;

  ///
  // CSS3 100vh not constant in mobile browser
  // @example
  // .column.h-screen > .grow ~ .h-4
  // => not working on mobile
  @include respond-to(mobile) {
    height: -webkit-fill-available;
  }
}
.h-full {
  height: 100%;
}
.w-1\/2 {
  width: 50%;
}
.w-1\/3 {
  width: 33.33333%;
}
.w-2\/3 {
  width: 66.66667%;
}
.w-1\/4 {
  width: 25%;
}
.w-3\/4 {
  width: 75%;
}
.w-1\/5 {
  width: 20%;
}
.w-2\/5 {
  width: 40%;
}
.w-3\/5 {
  width: 60%;
}
.w-4\/5 {
  width: 80%;
}
.w-1\/6 {
  width: 16.66667%;
}
.w-5\/6 {
  width: 83.33333%;
}

.w-640,
{
  width: 640px;
}

.w-768,
.w-pal
{
  width: 768px;
}

.w-1024,
.w-xga
{
  width: 1024px;
}


@include respond-to(mobile)
{
  .mobile\:w-auto {
    width: auto;
  }

  .mobile\:w-full {
    width: 100%;
  }

  .mobile\:w-screen {
    width: 100vw;
  }

  .mobile\:w-2 {
    width: 2rem;
  }

  .mobile\:h-2 {
    height: 2rem;
  }
}

@include respond-to(desktop)
{
  .desktop\:w-auto {
    width: auto;
  }

  .desktop\:w-full {
    width: 100%;
  }

  .desktop\:w-screen {
    width: 100vw;
  }
}