@define-mixin viewport0 {
    @media (max-width: 480px) {
        @mixin-content;
    }
}

@define-mixin viewport-4 {
    @media (max-width: 480px) {
        @mixin-content;
    }
}

@define-mixin viewport-7 {
    @media (max-width: 768px) {
        @mixin-content;
    }
}

@define-mixin viewport-9 {
    @media (max-width: 992px) {
        @mixin-content;
    }
}

@define-mixin viewport-12 {
    @media (max-width: 1200px) {
        @mixin-content;
    }
}

@define-mixin viewport4 {
    @media (min-width: 480px) {
        @mixin-content;
    }
}

@define-mixin viewport4-7 {
    @media (min-width: 480px) and (max-width: 768px) {
        @mixin-content;
    }
}

@define-mixin viewport7 {
    @media (min-width: 768px) {
        @mixin-content;
    }
}

@define-mixin viewport7-9 {
    @media (min-width: 768px) and (max-width: 992px) {
        @mixin-content;
    }
}

@define-mixin viewport9 {
    @media (min-width: 992px) {
        @mixin-content;
    }
}

@define-mixin viewport9-12 {
    @media (min-width: 992px) and (max-width: 1200px) {
        @mixin-content;
    }
}

@define-mixin viewport12 {
    @media (min-width: 1200px) {
        @mixin-content;
    }
}


/**
Mobile, portrait ****
320px	iPhone SE
375px	iPhone 6, 7, 8, X
414px	iPhone 8 Plus

Mobile, landscape ****
568px	iPhone SE
667px	iPhone 6, 7, 8
736px	iPhone 8 Plus
812px	iPhone X

Tablet, portrait ****	
768px	iPad Air, iPad Mini, iPad Pro 9"
834px	iPad Pro 10"

Tablet, landscape ****	
1024px	iPad Air, iPad Mini, iPad Pro 9"
1024px	iPad Pro 12" (portrait)
1112px	iPad Pro 10"

Laptop displays	
1366px	HD laptops (768p)
1366px	iPad Pro 12" (landscape)
1440px	13" MacBook Pro (2x scaling)

Desktop displays	
1680px	13" MacBook Pro (1.5x scaling)
1920px	1080p displays

- https://polypane.app/blog/the-complete-guide-to-css-media-queries/
- https://css-tricks.com/a-complete-guide-to-custom-properties/
*/