vanilla-framework 2.37.0 → 3.0.0-beta.2

package/scss/_patterns_grid.scss

@@ -1,22 +1,10 @@
 @import 'settings';
 
-@mixin vf-p-grid-modifications {
-  @include deprecate('3.0.0', 'vf-p-grid-modifications mixin will be removed') {
-    .row {
-      width: 100%;
-    }
-  }
-}
-
 // CSS grid implementation of columns for all screens sizes
 @mixin vf-grid-column($col) {
   @supports (display: grid) {
     grid-column-end: span #{$col};
 
-    // reset flex box fallback styles
-    margin-left: 0;
-    width: auto;
-
     //nesting
     @if $col > 1 {
       & .row {
@@ -31,7 +19,7 @@
   // (see https://github.com/canonical-web-and-design/vanilla-framework/issues/3199)
   .grid-demo [class*='#{$grid-column-prefix}'] {
     background: transparentize($color-negative, 0.9);
-    margin-bottom: $spv-outer--small;
+    margin-bottom: $spv--small;
   }
 
   .row {
@@ -39,7 +27,7 @@
   }
 
   // mobile grid
-  @media (max-width: $threshold-4-6-col) {
+  @media (max-width: $threshold-4-6-col - 1) {
     @for $i from $grid-columns-small through 1 {
       .#{$grid-small-col-prefix}#{$i} {
         @include vf-grid-column($i);
@@ -50,7 +38,7 @@
   }
 
   // tablet grid
-  @media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col) {
+  @media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col - 1) {
     @for $i from $grid-columns-medium through 1 {
       .#{$grid-medium-col-prefix}#{$i} {
         @include vf-grid-column($i);
@@ -65,9 +53,7 @@
     @for $i from $grid-columns through 1 {
       // set col-* to span respective number of columns on desktop
       .#{$grid-large-col-prefix}#{$i} {
-        // on large screens provide flex box column implementation for IE
         // on smaller screens let them display full width one under another
-        @include vf-grid-flex-column($i);
         @include vf-grid-column($i);
       }
     }
@@ -108,11 +94,11 @@
   @each $label, $breakpoint-min, $breakpoint-max, $col-count in $offsets {
     $query: null;
     @if $breakpoint-min == 0 {
-      $query: '(max-width: #{$breakpoint-max})';
+      $query: '(max-width: #{$breakpoint-max - 1})';
     } @else if $breakpoint-max == -1 {
       $query: '(min-width: #{$breakpoint-min})';
     } @else {
-      $query: '(min-width: #{$breakpoint-min}) and (max-width: #{$breakpoint-max})';
+      $query: '(min-width: #{$breakpoint-min}) and (max-width: #{$breakpoint-max - 1})';
     }
 
     @media #{$query} {
@@ -141,7 +127,7 @@
       position: absolute;
       right: map-get($grid-margin-widths, small);
 
-      @media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col) {
+      @media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col - 1) {
         left: map-get($grid-margin-widths, medium);
         right: map-get($grid-margin-widths, medium);
       }

package/scss/_patterns_heading-icon.scss

@@ -2,9 +2,9 @@
 
 @mixin vf-p-heading-icon {
   .p-heading-icon {
-    margin-bottom: $spv-outer--scaleable;
+    margin-bottom: $spv--x-large;
 
-    @media (min-width: $breakpoint-medium) {
+    @media (min-width: $breakpoint-heading-threshold) {
       margin-bottom: 0;
     }
   }
@@ -21,13 +21,13 @@
     flex-shrink: 0;
     height: map-get($icon-sizes, heading-icon--small);
     margin-bottom: 0;
-    margin-right: $sph-inner;
-    margin-top: map-get($nudges, nudge--h3-mobile);
+    margin-right: $sph--large;
+    margin-top: map-get($nudges, h3-mobile);
     width: map-get($icon-sizes, heading-icon--small);
 
-    @media (min-width: $breakpoint-medium) {
+    @media (min-width: $breakpoint-heading-threshold) {
       height: map-get($icon-sizes, heading-icon);
-      margin-top: map-get($nudges, nudge--h3);
+      margin-top: map-get($nudges, h3);
       width: map-get($icon-sizes, heading-icon);
     }
   }
@@ -38,7 +38,7 @@
       margin-top: $sp-x-small;
       width: map-get($icon-sizes, heading-icon--x-small);
 
-      @media (min-width: $breakpoint-medium) {
+      @media (min-width: $breakpoint-heading-threshold) {
         height: map-get($icon-sizes, heading-icon--small);
         margin-top: 0;
         width: map-get($icon-sizes, heading-icon--small);

package/scss/_patterns_headings.scss

@@ -25,30 +25,4 @@
   .p-heading--6 {
     @extend %vf-heading-6;
   }
-
-  @include deprecate('3.0.0', 'Use the `p-heading--1`, `p-heading--2`, ... instead') {
-    .p-heading--one {
-      @extend %vf-heading-1;
-    }
-
-    .p-heading--two {
-      @extend %vf-heading-2;
-    }
-
-    .p-heading--three {
-      @extend %vf-heading-3;
-    }
-
-    .p-heading--four {
-      @extend %vf-heading-4;
-    }
-
-    .p-heading--five {
-      @extend %vf-heading-5;
-    }
-
-    .p-heading--six {
-      @extend %vf-heading-6;
-    }
-  }
 }

package/scss/_patterns_icons.scss

@@ -8,7 +8,6 @@
   @include vf-p-icon-expand;
   @include vf-p-icon-collapse;
   @include vf-p-icon-chevron;
-  @include vf-p-icon-contextual-menu;
   @include vf-p-icon-close;
   @include vf-p-icon-help;
   @include vf-p-icon-info;
@@ -24,7 +23,6 @@
   @include vf-p-icon-success;
   @include vf-p-icon-share;
   @include vf-p-icon-user;
-  @include vf-p-icon-question;
   @include vf-p-icon-spinner;
   @include vf-p-icon-facebook;
   @include vf-p-icon-github;
@@ -32,12 +30,9 @@
   @include vf-p-icon-instagram;
   @include vf-p-icon-linkedin;
   @include vf-p-icon-youtube;
-  @include vf-p-icon-canonical;
-  @include vf-p-icon-ubuntu;
   @include vf-p-icon-rss;
   @include vf-p-icon-email;
   @include vf-p-icon-sizes;
-  @include vf-p-icon-in-button;
   @include vf-p-icon-show;
   @include vf-p-icon-hide;
 }
@@ -46,7 +41,6 @@
   // stylelint-disable selector-max-type
   h1,
   .p-heading--1,
-  .p-heading--one,
   .u-match-h1 {
     [class*='p-icon'] {
       @include vf-icon-size($x-height);
@@ -57,7 +51,6 @@
 
   h2,
   .p-heading--2,
-  .p-heading--two,
   .u-match-h2 {
     [class*='p-icon'] {
       @include vf-icon-size($x-height);
@@ -68,7 +61,6 @@
 
   h3,
   .p-heading--3,
-  .p-heading--three,
   .u-match-h3 {
     [class*='p-icon'] {
       @include vf-icon-size($default-icon-size);
@@ -79,7 +71,6 @@
 
   h4,
   .p-heading--4,
-  .p-heading--four,
   .u-match-h4 {
     [class*='p-icon'] {
       vertical-align: 0;
@@ -166,20 +157,6 @@
   }
 }
 
-@mixin vf-p-icon-contextual-menu {
-  @include deprecate('3.0.0', 'Use the `p-icon--chevron` class instead') {
-    .p-icon--contextual-menu {
-      @extend %icon;
-      @include vf-icon-contextual-menu($color-mid-dark);
-
-      [class*='--dark'] &,
-      &.is-light {
-        @include vf-icon-contextual-menu($color-mid-x-light);
-      }
-    }
-  }
-}
-
 @mixin vf-p-icon-close {
   .p-icon--close {
     @extend %icon;
@@ -346,12 +323,6 @@
   }
 }
 
-@mixin vf-p-icon-question {
-  @include deprecate('3.0.0', 'Use the `p-icon--help` class instead') {
-    // moved to vf-p-icon-help
-  }
-}
-
 @mixin vf-p-icon-spinner {
   .p-icon--spinner {
     @extend %icon;
@@ -406,24 +377,6 @@
   }
 }
 
-@mixin vf-p-icon-canonical {
-  @include deprecate('3.0.0', 'Removing icon from framework please use an alternative icon from our social set') {
-    .p-icon--canonical {
-      @extend %social-icon;
-      @include vf-icon-canonical;
-    }
-  }
-}
-
-@mixin vf-p-icon-ubuntu {
-  @include deprecate('3.0.0', 'Removing icon from framework please use an alternative icon from our social set') {
-    .p-icon--ubuntu {
-      @extend %social-icon;
-      @include vf-icon-ubuntu;
-    }
-  }
-}
-
 @mixin vf-p-icon-rss {
   .p-icon--rss {
     @extend %social-icon;
@@ -456,17 +409,6 @@
   }
 }
 
-@mixin vf-p-icon-in-button {
-  @include deprecate('3.0.0', 'No longer necessary') {
-    // Style overides for icons within a button
-    [class*='p-button-'] {
-      [class*='p-icon-'] {
-        top: 0;
-      }
-    }
-  }
-}
-
 @mixin vf-p-icon-applications {
   .p-icon--applications {
     @extend %icon;

package/scss/_patterns_label.scss

@@ -9,7 +9,7 @@
     border-radius: $border-radius;
     display: inline-block;
     font-weight: $font-weight-bold;
-    padding: map-get($nudges, nudge--x-small) $sph-inner--small;
+    padding: map-get($nudges, x-small) $sph--small;
     text-align: center;
     text-decoration: none;
     white-space: nowrap;

package/scss/_patterns_links.scss

@@ -42,18 +42,13 @@
       @include vf-focus;
 
       left: 0;
-      padding: $spv-inner--x-small;
+      padding: $spv--x-small;
       position: relative;
       top: 0;
       z-index: 999999;
     }
   }
 
-  // include external link styles only if CSS mask is supported
-  @supports (mask-size: 1em) or (-webkit-mask-size: 1em) {
-    @include vf-mask-supported;
-  }
-
   .p-top {
     align-items: center;
     display: flex;
@@ -62,7 +57,7 @@
       border-bottom: 1px solid $colors--light-theme--border-default;
       content: '';
       flex-grow: 1;
-      margin: $spv-outer--scaleable 0 calc(#{$spv-outer--scaleable} - 1px) 0;
+      margin: $spv--x-large 0 calc(#{$spv--x-large} - 1px) 0;
     }
 
     &::after {
@@ -70,37 +65,13 @@
       @include vf-icon-back-to-top($color-mid-dark);
 
       content: '';
-      margin-right: $sph-inner--small;
+      margin-right: $sph--small;
     }
   }
 
   .p-top__link {
     color: $color-dark;
-    padding: 0 $sph-inner--small 0 $sph-inner;
+    padding: 0 $sph--small 0 $sph--large;
     text-decoration: none;
   }
 }
-
-// For browsers that support CSS masks
-@mixin vf-mask-supported {
-  $external-icon-size--default-text: 1rem;
-
-  .p-link--external {
-    // Used for links point at a different domain
-    &::after {
-      background-color: currentColor;
-      content: '';
-      display: inline-block;
-      height: $external-icon-size--default-text;
-      line-height: 1;
-      // stylelint-disable property-no-vendor-prefix
-      -webkit-mask: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.157 3l-1.5 1.5H6a.5.5 0 00-.492.41L5.5 5v5a.5.5 0 00.41.492L6 10.5h5a.5.5 0 00.492-.41L11.5 10V8.538l1.5-1.5V10a2 2 0 01-2 2H6a2 2 0 01-2-2V5a2 2 0 012-2h3.157zm5.593-1.75V6h-1.5V3.81L8.5 8.56 7.44 7.5l4.748-4.75H10v-1.5h4.75z' fill='%23666' fill-rule='evenodd'/%3E%3C/svg%3E")
-        no-repeat 0 0 / #{$external-icon-size--default-text};
-      // stylelint-enable property-no-vendor-prefix
-      mask: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.157 3l-1.5 1.5H6a.5.5 0 00-.492.41L5.5 5v5a.5.5 0 00.41.492L6 10.5h5a.5.5 0 00.492-.41L11.5 10V8.538l1.5-1.5V10a2 2 0 01-2 2H6a2 2 0 01-2-2V5a2 2 0 012-2h3.157zm5.593-1.75V6h-1.5V3.81L8.5 8.56 7.44 7.5l4.748-4.75H10v-1.5h4.75z' fill='%23666' fill-rule='evenodd'/%3E%3C/svg%3E")
-        no-repeat 0 0 / #{$external-icon-size--default-text};
-      vertical-align: calc(#{$baseline-position} - #{$external-icon-size--default-text} - 1px);
-      width: $external-icon-size--default-text;
-    }
-  }
-}

package/scss/_patterns_list-tree.scss

@@ -77,7 +77,6 @@
     margin: 0 0.5rem 0 -1.75rem;
     padding: 0 0.5rem 0 1.75rem;
     transition-duration: 0s;
-    width: auto;
 
     &:hover {
       background: transparent;

package/scss/_patterns_lists.scss

@@ -2,13 +2,6 @@
 $list-status-icon-height: 0.875rem; // 14px value from svg as rem so it can be used in calculations
 $list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that positions the icon correctly
 
-$spv-list-item--inner: null;
-@if ($pad-lists) {
-  $spv-list-item--inner: $spv-inner--x-small; // padding top and bottom for lists containing loose text.
-} @else {
-  $spv-list-item--inner: 0;
-}
-
 @mixin vf-p-list-placeholders {
   %numbered-step-container {
     counter-reset: li;
@@ -38,8 +31,8 @@ $spv-list-item--inner: null;
 
   // Mixin for list items
   %vf-list-item {
-    padding-bottom: $spv-list-item--inner;
-    padding-top: $spv-list-item--inner;
+    padding-bottom: $spv--x-small;
+    padding-top: $spv--x-small;
 
     // FIXME: we need a better way to handle forms within lists
     // stylelint-disable selector-max-type
@@ -57,7 +50,7 @@ $spv-list-item--inner: null;
   %vf-list-item-state-base {
     @extend %vf-list;
 
-    background-position-y: $spv-list-item--inner + $list-status-icon-nudge;
+    background-position-y: $spv--x-small + $list-status-icon-nudge;
     background-repeat: no-repeat;
     background-size: $list-status-icon-height;
     padding-left: 2rem;
@@ -89,7 +82,7 @@ $spv-list-item--inner: null;
 @mixin vf-inline-list-item {
   display: inline;
   list-style: none;
-  margin-right: $sph-outer;
+  margin-right: $sph--large;
 
   &.last-item,
   &:last-of-type {
@@ -246,7 +239,7 @@ $spv-list-item--inner: null;
     float: none;
     margin-left: 0;
     overflow: visible;
-    padding-bottom: $spv-outer--scaleable;
+    padding-bottom: $spv--x-large;
     position: relative;
     width: 100%;
   }
@@ -262,14 +255,14 @@ $spv-list-item--inner: null;
   .p-stepped-list__title {
     @extend %numbered-step-title;
 
-    padding-left: $bullet-width-mobile + $sph-inner;
+    padding-left: $bullet-width-mobile + $sph--large;
 
     @media (min-width: $breakpoint-heading-threshold) {
-      padding-left: $bullet-width + $sph-inner;
+      padding-left: $bullet-width + $sph--large;
     }
 
     &::before {
-      margin-right: $sph-inner;
+      margin-right: $sph--large;
       width: $bullet-width-mobile;
 
       @media (min-width: $breakpoint-heading-threshold) {
@@ -279,10 +272,10 @@ $spv-list-item--inner: null;
   }
 
   .p-stepped-list__title + .p-stepped-list__content {
-    margin-left: $bullet-width-mobile + $sph-inner;
+    margin-left: $bullet-width-mobile + $sph--large;
 
     @media (min-width: $breakpoint-heading-threshold) {
-      margin-left: $bullet-width + $sph-inner;
+      margin-left: $bullet-width + $sph--large;
     }
   }
 
@@ -303,14 +296,14 @@ $spv-list-item--inner: null;
     }
 
     h#{$i}.p-stepped-list__title {
-      padding-left: $bullet-width-mobile + $sph-inner;
+      padding-left: $bullet-width-mobile + $sph--large;
 
       @media (min-width: $breakpoint-heading-threshold) {
-        padding-left: $bullet-width + $sph-inner;
+        padding-left: $bullet-width + $sph--large;
       }
 
       &::before {
-        margin-right: $sph-inner;
+        margin-right: $sph--large;
         width: $bullet-width-mobile;
 
         @media (min-width: $breakpoint-heading-threshold) {
@@ -320,10 +313,10 @@ $spv-list-item--inner: null;
     }
 
     h#{$i}.p-stepped-list__title + .p-stepped-list__content {
-      margin-left: $bullet-width-mobile + $sph-inner;
+      margin-left: $bullet-width-mobile + $sph--large;
 
       @media (min-width: $breakpoint-heading-threshold) {
-        margin-left: $bullet-width + $sph-inner;
+        margin-left: $bullet-width + $sph--large;
       }
     }
   }
@@ -335,14 +328,6 @@ $spv-list-item--inner: null;
 
     margin-left: auto;
 
-    // fallback for IE flex box grid implementation
-    @media (min-width: $threshold-6-12-col) {
-      .p-stepped-list__content,
-      .p-stepped-list__title {
-        @include vf-grid-flex-column;
-      }
-    }
-
     @supports (display: grid) {
       .p-stepped-list__content {
         @media (min-width: $threshold-6-12-col) {
@@ -362,7 +347,7 @@ $spv-list-item--inner: null;
       @extend %vf-row;
       @include vf-b-row-reset;
 
-      @media (min-width: $breakpoint-medium) {
+      @media (min-width: $threshold-6-12-col) {
         padding-top: $sp-unit;
         position: relative;
 
@@ -383,7 +368,7 @@ $spv-list-item--inner: null;
 // Adaptor class `is-split` to split the items of a list into two columns
 @mixin vf-p-list-split {
   [class*='p-list'].is-split {
-    @media (min-width: $breakpoint-medium) {
+    @media (min-width: $threshold-4-6-col) {
       @supports ((-webkit-columns: 1) or (columns: 1)) {
         column-gap: $sp-x-large;
         columns: 2;

package/scss/_patterns_logo-section.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 @mixin vf-p-set-logo-section-item-width($breakpoint: small) {
   // This mixin calculates the width of an individual logo.
 
@@ -35,10 +37,10 @@
 
     // The logic of these calculations is explained further down, in the @for loop
     $gutters-total-width: $grid-column-count * $gutter;
-    $percentage-width-of-one-col: 100% / $grid-column-count;
+    $percentage-width-of-one-col: math.div(100%, $grid-column-count);
     $percentage-contribution: $logo-column-span * $percentage-width-of-one-col;
     $gutter-width-inside-logo: $gutter * ($logo-column-span - 1);
-    $rem-contribution: $logo-column-span * ($gutters-total-width / $grid-column-count) - $gutter-width-inside-logo;
+    $rem-contribution: $logo-column-span * math.div($gutters-total-width, $grid-column-count) - $gutter-width-inside-logo;
 
     @include vf-p-apply-logo-section-item-width($percentage-contribution, $rem-contribution);
 
@@ -63,7 +65,7 @@
       // Thus the calculation is split into 2 parts, which are then used in the final calc() function:
 
       // calculate the width of a single column by dividing the entire width by the number of columns it represents:
-      $percentage-width-of-one-col: 100% / $column-count;
+      $percentage-width-of-one-col: math.div(100%, $column-count);
 
       // multiply the width of one column by the number of columns the logo needs to span
       $percentage-contribution: $logo-column-span * $percentage-width-of-one-col;
@@ -73,7 +75,7 @@
 
       // add the width of gutters spanned by the logo, subtract the $gutters-total-width / $column-count;
       // the signs here are reversed because the variable is subtracted. This avoids having + and - in the final css, e.g.: "+ -.75rem"
-      $rem-contribution: $logo-column-span * ($gutters-total-width / $column-count) - $gutter-width-inside-logo;
+      $rem-contribution: $logo-column-span * math.div($gutters-total-width, $column-count) - $gutter-width-inside-logo;
 
       .#{$grid-column-prefix}#{$column-count} & {
         @include vf-p-apply-logo-section-item-width($percentage-contribution, $rem-contribution);
@@ -108,7 +110,7 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    margin-bottom: $spv-outer--scaleable;
+    margin-bottom: $spv--x-large;
     // negates the margin of logos that sit in the first column
     margin-left: -#{$margin-small};
     width: calc(100% + #{$margin-small});

package/scss/_patterns_matrix.scss

@@ -3,13 +3,13 @@
 // List Grid
 @mixin vf-p-matrix {
   $matrix-img-width: map-get($icon-sizes, heading-icon--small);
-  $matrix-img-gutter: $sph-inner;
+  $matrix-img-gutter: $sph--large;
 
   .p-matrix {
     display: flex;
     flex-wrap: wrap;
     list-style: none;
-    margin-bottom: $spv-outer--scaleable;
+    margin-bottom: $spv--x-large;
     margin-left: 0;
     padding-left: 0;
   }
@@ -18,34 +18,32 @@
     border-top: 1px solid $color-mid-light;
     display: flex;
     flex: 1 1 auto;
-    padding-bottom: $spv-inner--large;
-    padding-top: calc(#{$spv-inner--large} - 1px);
+    padding-bottom: $spv--large;
+    padding-top: calc(#{$spv--large} - 1px);
 
     &:first-child {
       border-top: none;
     }
 
-    @media (min-width: $breakpoint-small) {
+    @media (min-width: $threshold-4-6-col) {
       display: flex;
       flex-wrap: wrap;
       width: 33.333%;
     }
 
-    @media (min-width: $breakpoint-small) and (max-width: $breakpoint-medium) {
+    @media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col - 1) {
+      flex-direction: column;
+
       &:nth-child(2),
       &:nth-child(3) {
         border-top: none;
       }
     }
 
-    @media (min-width: $breakpoint-small) and (max-width: $breakpoint-large) {
-      flex-direction: column;
-    }
-
-    @media (min-width: $breakpoint-medium) {
+    @media (min-width: $threshold-6-12-col) {
       border-right: 1px solid $color-mid-light;
-      padding-left: $spv-inner--large;
-      padding-right: $spv-inner--large;
+      padding-left: $spv--large;
+      padding-right: $spv--large;
       width: 33.333%;
 
       &:empty {
@@ -67,7 +65,7 @@
       }
     }
 
-    @media (min-width: $breakpoint-large) {
+    @media (min-width: $threshold-6-12-col) {
       // 3 items per row
       border-right: 1px solid $color-mid-light;
       width: 33.333%;
@@ -97,18 +95,18 @@
     align-self: flex-start;
     flex-shrink: 0;
     height: auto;
-    margin-bottom: $spv-inner--small;
+    margin-bottom: $spv--small;
     margin-right: $matrix-img-gutter;
     margin-top: 0;
     width: $matrix-img-width;
 
     @media (min-width: $breakpoint-heading-threshold) {
-      margin-top: -#{map-get($nudges, nudge--h4)};
+      margin-top: -#{map-get($nudges, h4)};
     }
 
     @if ($increase-font-size-on-larger-screens) {
       @media (min-width: $breakpoint-x-large) {
-        margin-top: -#{map-get($nudges, nudge--h4-large)};
+        margin-top: -#{map-get($nudges, h4-large)};
       }
     }
   }
@@ -117,7 +115,7 @@
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
-    padding-right: $sph-inner;
+    padding-right: $sph--large;
 
     @media (min-width: $breakpoint-large) {
       width: calc(100% - #{$matrix-img-width + $matrix-img-gutter});
@@ -128,12 +126,12 @@
     @extend %vf-heading-4;
 
     @media (min-width: $breakpoint-heading-threshold) {
-      margin-bottom: -#{map-get($nudges, nudge--h4)};
+      margin-bottom: -#{map-get($nudges, h4)};
     }
 
     @if ($increase-font-size-on-larger-screens) {
       @media (min-width: $breakpoint-x-large) {
-        margin-bottom: -#{map-get($nudges, nudge--h4-large)};
+        margin-bottom: -#{map-get($nudges, h4-large)};
       }
     }
   }
@@ -141,7 +139,7 @@
   .p-matrix__desc {
     margin-bottom: $spv-nudge-compensation;
 
-    @media (max-width: $breakpoint-heading-threshold) {
+    @media (max-width: $breakpoint-heading-threshold - 1) {
       margin-top: -#{$sp-unit};
     }