@use "sass:math";

$bp: get-breakpoint-name();

.h-20vh {height: math.div(1080 * 20, 100) + 0 !important;}
.h-25vh {height: math.div(1080 * 25, 100) + 0 !important;}
.h-33vh {height: math.div(1080 * 33.33, 100) + 0 !important;}
.h-50vh {height: math.div(1080 * 50, 100) + 0 !important;}
.h-66vh {height: math.div(1080 * 66.67, 100) + 0 !important;}
.h-75vh {height: math.div(1080 * 75, 100) + 0 !important;}
.h-80vh {height: math.div(1080 * 80, 100) + 0 !important;}
.h-100 {height: 100% !important;}
.h-auto {height: auto !important;}

@media (min-width: $breakpoint) {

  .h-#{$bp}-20vh {height: math.div(1080 * 20, 100) + 0 !important;}
  .h-#{$bp}-25vh {height: math.div(1080 * 25, 100) + 0 !important;}
  .h-#{$bp}-33vh {height: math.div(1080 * 33.33, 100) + 0 !important;}
  .h-#{$bp}-50vh {height: math.div(1080 * 50, 100) + 0 !important;}
  .h-#{$bp}-66vh {height: math.div(1080 * 66.67, 100) + 0 !important;}
  .h-#{$bp}-75vh {height: math.div(1080 * 75, 100) + 0 !important;}
  .h-#{$bp}-80vh {height: math.div(1080 * 80, 100) + 0 !important;}
  .h-#{$bp}-100 {height: 100% !important;}
  .h-#{$bp}-auto {height: auto !important;}
}