.w-8{
  width:  8px;
  height: 8px;
  display: inline-block;
}
.w-16{
  width:  16px;
  height: 16px;
  display: inline-block;
}
.w-20{
  width:  20px;
  height: 20px;
  display: inline-block;
}
.w-24{
  width:  24px;
  height: 24px;
  display: inline-block;
  text-align: center;
}
.w-32{
  width:  32px;
  height: 32px;
  line-height: 32px;
  display: inline-block;
  text-align: center;
}
.w-40{
  width:  40px;
  height: 40px;
  line-height: 40px;
  display: inline-block;
  text-align: center;
}
.w-48{
  width:  48px;
  height: 48px;
  line-height: 48px;
  display: inline-block;
  text-align: center;
}
.w-56{
  width:  56px;
  height: 56px;
  line-height: 56px;
  display: inline-block;
  text-align: center;
}

.w-64{
  width:  64px;
}
.w-96{
  width:  96px;
}
.w-128{
  width:  128px;
}

.w-xxs{
  width: 60px;
}
.w-xs{
  width: 90px;
}
.w-sm{
  width: 120px;
}
.w{
  width: 180px;
}
.w-md{
  width: 200px;
}
.w-lg{
  width: 240px;
}
.w-xl{
  width: 280px;
}
.w-xxl{
  width: 320px;
}

.w-full{
  width: 100%;
}
.w-auto{
  width: auto;
}
.h-auto{
  height: auto;
}
.h-full{
  height: 100%;
}
.h-v{
  height: 100vh;
}
.h-v-5{
  height: 50vh;
}

@include media-breakpoint-down(sm) {
  .w-auto-sm{
    width: auto;
  }
  .w-full-sm{
    width: 100%;
  }
}

@include media-breakpoint-down(xs) {
  .w-auto-xs{
    width: auto;
  }
  .w-full-xs{
    width: 100%;
  }
}