dmpinder

## Note: You will need to customise this to your project and base font-size, you can't use this as-is!

Element                 |   Mobile              |   Desktop             |   Class to use
----------------------------------------------------------------------------------------------
Paragraph               |   19px (1.1875rem)    |   20px (1.25rem)      |   None
Lead-in Paragraph       |   22px (1.375rem)     |   24px (1.5rem)       |   .lead
Small Paragraph         |   15px (0.9375rem)    |   16px (1rem)         |   .small
----------------------------------------------------------------------------------------------
H1                      |   56px (3.5rem)       |   64px (4rem)         |   .heading-1
H2                      |   44px (2.75rem)      |   52px (3.25rem)      |   .heading-2

dmpinder

@mixin webp($webp, $fallback) {
    background: url($fallback);

    /* Chrome 66+, Edge 79+, Opera 53+, Android Brower 80+ */
    @media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution:.001dpcm) {
        @supports (background-image: -webkit-image-set(url($webp) 1x)) {
            background: -webkit-image-set(url($webp) 1x);
        }
    }