@gitlab/ui 32.24.1 → 32.28.0

package/src/scss/utilities.scss

@@ -970,13 +970,13 @@
 }
 
 .gl-md-border-l-solid {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     border-left-style: solid;
   }
 }
 
 .gl-md-border-l-solid\! {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     border-left-style: solid !important;
   }
 }
@@ -1966,13 +1966,13 @@
 }
 
 .gl-sm-text-body {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   color: $body-color;
   }
 }
 
 .gl-sm-text-body\! {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   color: $body-color !important;
   }
 }
@@ -2438,37 +2438,37 @@
 }
 
 .gl-sm-display-none {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   display: none;
   }
 }
 
 .gl-sm-display-none\! {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   display: none !important;
   }
 }
 
 .gl-md-display-none {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   display: none;
   }
 }
 
 .gl-md-display-none\! {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   display: none !important;
   }
 }
 
 .gl-lg-display-none {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   display: none;
   }
 }
 
 .gl-lg-display-none\! {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   display: none !important;
   }
 }
@@ -2482,37 +2482,37 @@
 }
 
 .gl-sm-display-flex {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   display: flex;
   }
 }
 
 .gl-sm-display-flex\! {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   display: flex !important;
   }
 }
 
 .gl-md-display-flex {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   display: flex;
   }
 }
 
 .gl-md-display-flex\! {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   display: flex !important;
   }
 }
 
 .gl-lg-display-flex {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   display: flex;
   }
 }
 
 .gl-lg-display-flex\! {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   display: flex !important;
   }
 }
@@ -2526,37 +2526,37 @@
 }
 
 .gl-sm-display-inline-flex {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   display: inline-flex;
   }
 }
 
 .gl-sm-display-inline-flex\! {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   display: inline-flex !important;
   }
 }
 
 .gl-md-display-inline-flex {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   display: inline-flex;
   }
 }
 
 .gl-md-display-inline-flex\! {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   display: inline-flex !important;
   }
 }
 
 .gl-lg-display-inline-flex {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   display: inline-flex;
   }
 }
 
 .gl-lg-display-inline-flex\! {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   display: inline-flex !important;
   }
 }
@@ -2570,37 +2570,37 @@
 }
 
 .gl-sm-display-block {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   display: block;
   }
 }
 
 .gl-sm-display-block\! {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   display: block !important;
   }
 }
 
 .gl-md-display-block {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   display: block;
   }
 }
 
 .gl-md-display-block\! {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   display: block !important;
   }
 }
 
 .gl-lg-display-block {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   display: block;
   }
 }
 
 .gl-lg-display-block\! {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   display: block !important;
   }
 }
@@ -2614,13 +2614,13 @@
 }
 
 .gl-sm-display-inline {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   display: inline;
   }
 }
 
 .gl-sm-display-inline\! {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   display: inline !important;
   }
 }
@@ -2634,37 +2634,37 @@
 }
 
 .gl-sm-display-inline-block {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   display: inline-block;
   }
 }
 
 .gl-sm-display-inline-block\! {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   display: inline-block !important;
   }
 }
 
 .gl-md-display-inline-block {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   display: inline-block;
   }
 }
 
 .gl-md-display-inline-block\! {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   display: inline-block !important;
   }
 }
 
 .gl-lg-display-inline-block {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   display: inline-block;
   }
 }
 
 .gl-lg-display-inline-block\! {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   display: inline-block !important;
   }
 }
@@ -2702,13 +2702,13 @@
 }
 
 .gl-lg-display-table-cell {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   display: table-cell;
   }
 }
 
 .gl-lg-display-table-cell\! {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   display: table-cell !important;
   }
 }
@@ -2753,73 +2753,73 @@
 }
 
 .gl-xs-align-items-baseline {
-  @media (max-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-down(sm) {
   align-items: baseline;
   }
 }
 
 .gl-xs-align-items-baseline\! {
-  @media (max-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-down(sm) {
   align-items: baseline !important;
   }
 }
 
 .gl-lg-align-items-baseline {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   align-items: baseline;
   }
 }
 
 .gl-lg-align-items-baseline\! {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   align-items: baseline !important;
   }
 }
 
 .gl-md-align-items-center {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   align-items: center;
   }
 }
 
 .gl-md-align-items-center\! {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   align-items: center !important;
   }
 }
 
 .gl-lg-align-items-center {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   align-items: center;
   }
 }
 
 .gl-lg-align-items-center\! {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   align-items: center !important;
   }
 }
 
 .gl-sm-align-items-flex-end {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   align-items: flex-end;
   }
 }
 
 .gl-sm-align-items-flex-end\! {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   align-items: flex-end !important;
   }
 }
 
 .gl-lg-align-items-flex-end {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   align-items: flex-end;
   }
 }
 
 .gl-lg-align-items-flex-end\! {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   align-items: flex-end !important;
   }
 }
@@ -2833,49 +2833,49 @@
 }
 
 .gl-lg-flex-wrap {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   flex-wrap: wrap;
   }
 }
 
 .gl-lg-flex-wrap\! {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   flex-wrap: wrap !important;
   }
 }
 
 .gl-xl-flex-wrap {
-  @media (min-width: $breakpoint-xl) {
+  @include gl-media-breakpoint-up(xl) {
   flex-wrap: wrap;
   }
 }
 
 .gl-xl-flex-wrap\! {
-  @media (min-width: $breakpoint-xl) {
+  @include gl-media-breakpoint-up(xl) {
   flex-wrap: wrap !important;
   }
 }
 
 .gl-sm-flex-wrap {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   flex-wrap: wrap;
   }
 }
 
 .gl-sm-flex-wrap\! {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   flex-wrap: wrap !important;
   }
 }
 
 .gl-flex-sm-wrap {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   flex-wrap: wrap;
   }
 }
 
 .gl-flex-sm-wrap\! {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   flex-wrap: wrap !important;
   }
 }
@@ -2889,25 +2889,25 @@
 }
 
 .gl-sm-flex-direction-column {
-  @media (max-width: $breakpoint-md) {
+  @include gl-media-breakpoint-down(md) {
     @include gl-flex-direction-column;
   }
 }
 
 .gl-sm-flex-direction-column\! {
-  @media (max-width: $breakpoint-md) {
+  @include gl-media-breakpoint-down(md) {
     @include gl-flex-direction-column;
   }
 }
 
 .gl-xs-flex-direction-column {
-  @media (max-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-down(sm) {
     flex-direction: column;
   }
 }
 
 .gl-xs-flex-direction-column\! {
-  @media (max-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-down(sm) {
     flex-direction: column !important;
   }
 }
@@ -2937,49 +2937,49 @@
 }
 
 .gl-sm-flex-direction-row {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   flex-direction: row;
   }
 }
 
 .gl-sm-flex-direction-row\! {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   flex-direction: row !important;
   }
 }
 
 .gl-md-flex-direction-row {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   flex-direction: row;
   }
 }
 
 .gl-md-flex-direction-row\! {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   flex-direction: row !important;
   }
 }
 
 .gl-lg-flex-direction-row {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   flex-direction: row;
   }
 }
 
 .gl-lg-flex-direction-row\! {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   flex-direction: row !important;
   }
 }
 
 .gl-xl-flex-direction-row {
-  @media (min-width: $breakpoint-xl) {
+  @include gl-media-breakpoint-up(xl) {
   flex-direction: row;
   }
 }
 
 .gl-xl-flex-direction-row\! {
-  @media (min-width: $breakpoint-xl) {
+  @include gl-media-breakpoint-up(xl) {
   flex-direction: row !important;
   }
 }
@@ -3025,37 +3025,37 @@
 }
 
 .gl-md-flex-grow-0 {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   flex-grow: 0;
   }
 }
 
 .gl-md-flex-grow-0\! {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   flex-grow: 0 !important;
   }
 }
 
 .gl-md-flex-grow-1 {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   flex-grow: 1;
   }
 }
 
 .gl-md-flex-grow-1\! {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   flex-grow: 1 !important;
   }
 }
 
 .gl-lg-flex-grow-1 {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   flex-grow: 1;
   }
 }
 
 .gl-lg-flex-grow-1\! {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   flex-grow: 1 !important;
   }
 }
@@ -3093,37 +3093,37 @@
 }
 
 .gl-sm-justify-content-end {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   justify-content: flex-end;
   }
 }
 
 .gl-sm-justify-content-end\! {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   justify-content: flex-end !important;
   }
 }
 
 .gl-md-justify-content-end {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   justify-content: flex-end;
   }
 }
 
 .gl-md-justify-content-end\! {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   justify-content: flex-end !important;
   }
 }
 
 .gl-lg-justify-content-end {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   justify-content: flex-end;
   }
 }
 
 .gl-lg-justify-content-end\! {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   justify-content: flex-end !important;
   }
 }
@@ -3145,25 +3145,25 @@
 }
 
 .gl-justify-content-md-start {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   justify-content: flex-start;
   }
 }
 
 .gl-justify-content-md-start\! {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   justify-content: flex-start !important;
   }
 }
 
 .gl-lg-justify-content-start {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   justify-content: flex-start;
   }
 }
 
 .gl-lg-justify-content-start\! {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   justify-content: flex-start !important;
   }
 }
@@ -3193,25 +3193,25 @@
 }
 
 .gl-sm-align-self-center {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   align-self: center;
   }
 }
 
 .gl-sm-align-self-center\! {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   align-self: center !important;
   }
 }
 
 .gl-md-align-self-center {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   align-self: center;
   }
 }
 
 .gl-md-align-self-center\! {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   align-self: center !important;
   }
 }
@@ -3518,6 +3518,14 @@
   top: $gl-spacing-scale-7 !important
 }
 
+.gl-top-8 {
+  top: $gl-spacing-scale-8
+}
+
+.gl-top-8\! {
+  top: $gl-spacing-scale-8 !important
+}
+
 .gl-top-half {
   top: 50%
 }
@@ -3990,13 +3998,13 @@
 }
 
 .gl-xs-w-full {
-  @media (max-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-down(sm) {
   width: 100%;
   }
 }
 
 .gl-xs-w-full\! {
-  @media (max-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-down(sm) {
   width: 100% !important;
   }
 }
@@ -4138,37 +4146,37 @@
 }
 
 .gl-sm-w-auto {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
     width: auto;
   }
 }
 
 .gl-sm-w-auto\! {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
     width: auto !important;
   }
 }
 
 .gl-md-w-auto {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     width: auto;
   }
 }
 
 .gl-md-w-auto\! {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     width: auto !important;
   }
 }
 
 .gl-md-w-50p {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     width: 50%;
   }
 }
 
 .gl-md-w-50p\! {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     width: 50% !important;
   }
 }
@@ -4302,13 +4310,13 @@
 }
 
 .gl-md-max-w-30p {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     max-width: 30%;
   }
 }
 
 .gl-md-max-w-30p\! {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     max-width: 30% !important;
   }
 }
@@ -4425,13 +4433,13 @@
   padding-right: $gl-spacing-scale-7 !important;
 }
 .gl-lg-px-7 {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
     padding-left: $gl-spacing-scale-7;
     padding-right: $gl-spacing-scale-7;
   }
 }
 .gl-lg-px-7\! {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
     padding-left: $gl-spacing-scale-7 !important;
     padding-right: $gl-spacing-scale-7 !important;
   }
@@ -4603,12 +4611,12 @@
   padding-top: $gl-spacing-scale-2 !important;
 }
 .gl-pt-md-2 {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     padding-top: $gl-spacing-scale-2;
   }
 }
 .gl-pt-md-2\! {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     padding-top: $gl-spacing-scale-2 !important;
   }
 }
@@ -4667,12 +4675,12 @@
   padding-top: $gl-spacing-scale-12 !important;
 }
 .gl-md-pt-12 {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   padding-top: $gl-spacing-scale-12;
   }
 }
 .gl-md-pt-12\! {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   padding-top: $gl-spacing-scale-12 !important;
   }
 }
@@ -4869,12 +4877,12 @@
   margin-top: -$gl-spacing-scale-1 !important;
 }
 .gl-mt-md-n2 {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     margin-top: -$gl-spacing-scale-2;
   }
 }
 .gl-mt-md-n2\! {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     margin-top: -$gl-spacing-scale-2 !important;
   }
 }
@@ -5407,302 +5415,302 @@
   margin-right: -#{$gl-spacing-scale-6} !important;
 }
 .gl-xs-mb-3 {
-  @media (max-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-down(sm) {
   margin-bottom: $gl-spacing-scale-3;
   }
 }
 .gl-xs-mb-3\! {
-  @media (max-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-down(sm) {
   margin-bottom: $gl-spacing-scale-3 !important;
   }
 }
 .gl-sm-ml-3 {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   margin-left: $gl-spacing-scale-3;
   }
 }
 .gl-sm-ml-3\! {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   margin-left: $gl-spacing-scale-3 !important;
   }
 }
 .gl-sm-mt-0 {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   margin-top: 0;
   }
 }
 .gl-sm-mt-0\! {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   margin-top: 0 !important;
   }
 }
 .gl-sm-mt-5 {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   margin-top: $gl-spacing-scale-5;
   }
 }
 .gl-sm-mt-5\! {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   margin-top: $gl-spacing-scale-5 !important;
   }
 }
 .gl-sm-mb-7 {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   margin-bottom: $gl-spacing-scale-7;
   }
 }
 .gl-sm-mb-7\! {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   margin-bottom: $gl-spacing-scale-7 !important;
   }
 }
 .gl-sm-my-12 {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   margin-top: $gl-spacing-scale-12;
   margin-bottom: $gl-spacing-scale-12;
   }
 }
 .gl-sm-my-12\! {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   margin-top: $gl-spacing-scale-12 !important;
   margin-bottom: $gl-spacing-scale-12 !important;
   }
 }
 .gl-sm-mx-0 {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   margin-left: 0;
   margin-right: 0;
   }
 }
 .gl-sm-mx-0\! {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   margin-left: 0 !important;
   margin-right: 0 !important;
   }
 }
 .gl-md-mt-0 {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   margin-top: 0;
   }
 }
 .gl-md-mt-0\! {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   margin-top: 0 !important;
   }
 }
 .gl-md-mb-0 {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   margin-bottom: 0;
   }
 }
 .gl-md-mb-0\! {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   margin-bottom: 0 !important;
   }
 }
 .gl-lg-mb-0 {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   margin-bottom: 0;
   }
 }
 .gl-lg-mb-0\! {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   margin-bottom: 0 !important;
   }
 }
 .gl-lg-mb-5 {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   margin-bottom: $gl-spacing-scale-5;
   }
 }
 .gl-lg-mb-5\! {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   margin-bottom: $gl-spacing-scale-5 !important;
   }
 }
 .gl-md-mr-3 {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   margin-right: $gl-spacing-scale-3;
   }
 }
 .gl-md-mr-3\! {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   margin-right: $gl-spacing-scale-3 !important;
   }
 }
 .gl-md-mr-5 {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   margin-right: $gl-spacing-scale-5;
   }
 }
 .gl-md-mr-5\! {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   margin-right: $gl-spacing-scale-5 !important;
   }
 }
 .gl-lg-mr-2 {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   margin-right: $gl-spacing-scale-2;
   }
 }
 .gl-lg-mr-2\! {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   margin-right: $gl-spacing-scale-2 !important;
   }
 }
 .gl-lg-mr-3 {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   margin-right: $gl-spacing-scale-3;
   }
 }
 .gl-lg-mr-3\! {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   margin-right: $gl-spacing-scale-3 !important;
   }
 }
 .gl-lg-ml-2 {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   margin-left: $gl-spacing-scale-2;
   }
 }
 .gl-lg-ml-2\! {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   margin-left: $gl-spacing-scale-2 !important;
   }
 }
 .gl-lg-ml-3 {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   margin-left: $gl-spacing-scale-3;
   }
 }
 .gl-lg-ml-3\! {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   margin-left: $gl-spacing-scale-3 !important;
   }
 }
 .gl-lg-mx-2 {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   margin-left: $gl-spacing-scale-2;
   margin-right: $gl-spacing-scale-2;
   }
 }
 .gl-lg-mx-2\! {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   margin-left: $gl-spacing-scale-2 !important;
   margin-right: $gl-spacing-scale-2 !important;
   }
 }
 .gl-lg-mx-3 {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   margin-left: $gl-spacing-scale-3;
   margin-right: $gl-spacing-scale-3;
   }
 }
 .gl-lg-mx-3\! {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   margin-left: $gl-spacing-scale-3 !important;
   margin-right: $gl-spacing-scale-3 !important;
   }
 }
 .gl-lg-my-5 {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   margin-top: $gl-spacing-scale-5;
   margin-bottom: $gl-spacing-scale-5;
   }
 }
 .gl-lg-my-5\! {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   margin-top: $gl-spacing-scale-5 !important;
   margin-bottom: $gl-spacing-scale-5 !important;
   }
 }
 .gl-lg-mt-0 {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   margin-top: 0;
   }
 }
 .gl-lg-mt-0\! {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   margin-top: 0 !important;
   }
 }
 .gl-lg-mt-5 {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   margin-top: $gl-spacing-scale-5;
   }
 }
 .gl-lg-mt-5\! {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   margin-top: $gl-spacing-scale-5 !important;
   }
 }
 .gl-sm-pr-5 {
-  @media (max-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-down(sm) {
   padding-right: $gl-spacing-scale-5;
   }
 }
 .gl-sm-pr-5\! {
-  @media (max-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-down(sm) {
   padding-right: $gl-spacing-scale-5 !important;
   }
 }
 .gl-sm-pl-5 {
-  @media (max-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-down(sm) {
   padding-left: $gl-spacing-scale-5;
   }
 }
 .gl-sm-pl-5\! {
-  @media (max-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-down(sm) {
   padding-left: $gl-spacing-scale-5 !important;
   }
 }
 .gl-md-pr-0 {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   padding-right: 0;
   }
 }
 .gl-md-pr-0\! {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   padding-right: 0 !important;
   }
 }
 .gl-md-pr-1 {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   padding-right: $gl-spacing-scale-1;
   }
 }
 .gl-md-pr-1\! {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   padding-right: $gl-spacing-scale-1 !important;
   }
 }
 .gl-md-pr-2 {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   padding-right: $gl-spacing-scale-2;
   }
 }
 .gl-md-pr-2\! {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   padding-right: $gl-spacing-scale-2 !important;
   }
 }
 .gl-lg-pr-5 {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   padding-right: $gl-spacing-scale-5;
   }
 }
 .gl-lg-pr-5\! {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
   padding-right: $gl-spacing-scale-5 !important;
   }
 }
 .gl-md-pl-3 {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   padding-left: $gl-spacing-scale-3;
   }
 }
 .gl-md-pl-3\! {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
   padding-left: $gl-spacing-scale-3 !important;
   }
 }
@@ -6374,13 +6382,13 @@
 }
 
 .gl-sm-font-weight-bold {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   font-weight: $gl-font-weight-bold;
   }
 }
 
 .gl-sm-font-weight-bold\! {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
   font-weight: $gl-font-weight-bold !important;
   }
 }