Responsive Design Solution

$grid-breakpoints: (
    md: 480px,
    lg: 769px,
    xl: 960px,
    xxl: 1330px
);

• Mobile Small (invision) -> Maps to nothing, we don’t have a small breakpoint implementation yet so this design would be ignored in implementation
• Mobile (invision) -> Maps to default design. Since we are mobile first this would be the default implementation without any media query, this would be overridden with upper level media query styles
• Tablet (invision) -> Maps to md i.e. 480px and above breakpoint in code
• Desktop LG (invision) -> Maps to lg i.e. 769px and above breakpoint in code
• ? -> Since there is no xl breakpoint in the invison, the style from Desktop LG would be used for xl
• Desktop XXL (invision) - > Maps to xxl i.e. 1330px and above breakpoint in code

$font-sizes: (
    small: 13px,
    small-plus: 14px,
    ...
);

$line-heights: (
    small: 24px,
    small-plus: 14px,
    ...
);

@mixin text-variant($size) {
    font-size: #{map_get($font-sizes, $size)};
    line-height: #{map_get($line-heights, $size)}
}

// then append this to the class where you need font-size/line-height
@include text-variant(small)