$bp: get-breakpoint-name();

.w-20 {width: 20% !important;}
.w-25 {width: 25% !important;}
.w-33 {width: 33.33% !important;}
.w-50 {width: 50% !important;}
.w-66 {width: 66.67% !important;}
.w-75 {width: 75% !important;}
.w-80 {width: 80% !important;}
.w-100 {width: 100% !important;}
.w-auto {width: auto !important;}

.h-20vh {height: 20vh !important;}
.h-25vh {height: 25vh !important;}
.h-33vh {height: 33.33vh !important;}
.h-50vh {height: 50vh !important;}
.h-66vh {height: 66.67vh !important;}
.h-75vh {height: 75vh !important;}
.h-80vh {height: 80vh !important;}
.h-100 {height: 100% !important;}
.h-auto {height: auto !important;}

@media (min-width: $breakpoint) {

  .w-#{$bp}-20 {width: 20% !important;}
  .w-#{$bp}-25 {width: 25% !important;}
  .w-#{$bp}-33 {width: 33.33% !important;}
  .w-#{$bp}-50 {width: 50% !important;}
  .w-#{$bp}-66 {width: 66.67% !important;}
  .w-#{$bp}-75 {width: 75% !important;}
  .w-#{$bp}-80 {width: 80% !important;}
  .w-#{$bp}-100 {width: 100% !important;}
  .w-#{$bp}-auto {width: auto !important;}

  .h-#{$bp}-20vh {height: 20vh !important;}
  .h-#{$bp}-25vh {height: 25vh !important;}
  .h-#{$bp}-33vh {height: 33.33vh !important;}
  .h-#{$bp}-50vh {height: 50vh !important;}
  .h-#{$bp}-66vh {height: 66.67vh !important;}
  .h-#{$bp}-75vh {height: 75vh !important;}
  .h-#{$bp}-80vh {height: 80vh !important;}
  .h-#{$bp}-100 {height: 100% !important;}
  .h-#{$bp}-auto {height: auto !important;}
}