fix: resolving edx.org and Open edX breakpoint clash

* simplifying edx.org breakpoints to use min-width
* creating -bp-* centric Sass variables
* converting all existing edx.org centric media queries to use new Sass variables

ECOM-1457

lms/static/sass/base/_grid-settings.scss

-@import "neat/neat-helpers"; // or "neat-helpers" when in Rails
+@import "neat/neat-helpers";
 
-/* Change the grid settings */
+// Change the grid settings
 $max-width: 1200px;
-/* Override the default global box-sizing */
+
+// Override the default global box-sizing
 $border-box-sizing: false;
-/* Grid width variables */
-$large-min-width: 769px;
 
+// Grid width variables
+$large-min-width: 769px;
 
-/* Breakpoints */
+// breakpoints
 $bp-tiny: new-breakpoint(max-width 320px 4);
 $bp-small: new-breakpoint(min-width 321px max-width 540px, 4);
 $bp-medium: new-breakpoint(min-width 541px max-width 768px, 8);
 $bp-large: new-breakpoint(min-width $large-min-width max-width 979px, 12);
 $bp-huge:  new-breakpoint(min-width 980px 12);
+
+// edX-centric breakpoints (to be temporarily used with edx.org features only)
+$edx-bp-tiny: new-breakpoint(max-width 320px 4);
+$edx-bp-small: new-breakpoint(min-width 321px max-width 540px, 4);
+$edx-bp-medium: new-breakpoint(min-width 541px max-width 768px, 8);
+$edx-bp-large: new-breakpoint(min-width $large-min-width 12);
+$edx-bp-huge:  new-breakpoint(min-width 980px 12);

lms/static/sass/shared/_footer.scss

@@ -445,10 +445,10 @@ $edx-footer-bg-color: rgb(252,252,252);
       @include span-columns(12);
     }
 
-    @include media( $bp-medium ) {
+    @include media( $edx-bp-medium ) {
     }
 
-    @include media( $bp-large ) {
+    @include media( $edx-bp-large ) {
       .footer-about {
         @include span-columns(6);
       }

lms/static/sass/shared/_header.scss

@@ -765,7 +765,7 @@ header.global-new {
       }
     }
 
-    @include media( $bp-large ) {
+    @include media( $edx-bp-large ) {
       .wrapper-header {
         width: 100%;
         min-width: 800px;
@@ -828,7 +828,7 @@ header.global-new {
       }
     }
 
-    @include media( $bp-huge ) {
+    @include media( $edx-bp-huge ) {
       .wrapper-header {
         padding: 17px 0;
       }

lms/static/sass/views/_verification.scss

@@ -1431,7 +1431,7 @@
       }
     }
 
-    @include media( $bp-large ) {
+    @include media( $edx-bp-large ) {
       .contribution-options {
         .field {
           width: auto;
@@ -1454,7 +1454,7 @@
       }
     }
 
-    @include media( $bp-huge ) {
+    @include media( $edx-bp-huge ) {
       .register-choice {
         .list-actions {
           float: right;