diff --git a/assets/sass/_mixins.sass b/assets/sass/_mixins.sass
new file mode 100644
index 00000000..bad400ed
--- /dev/null
+++ b/assets/sass/_mixins.sass
@@ -0,0 +1,35 @@
+=from($device)
+    @media screen and (min-width: $device)
+        @content
+
+=until($device)
+    @media screen and (max-width: $device - 1px)
+        @content
+
+=mobile
+    @media screen and (max-width: $screen-tablet - 1px)
+        @content
+
+=tablet
+    @media screen and (min-width: $screen-tablet)
+        @content
+
+=tablet-only
+    @media screen and (min-width: $screen-tablet) and (max-width: $screen-desktop - 1px)
+        @content
+
+=touch
+    @media screen and (max-width: $screen-desktop - 1px)
+        @content
+
+=desktop
+    @media screen and (min-width: $screen-desktop)
+        @content
+
+=desktop-only
+    @media screen and (min-width: $screen-desktop) and (max-width: $screen-lg - 1px)
+        @content
+
+=widescreen
+    @media screen and (min-width: $screen-lg)
+        @content
diff --git a/assets/sass/pages/_projects.sass b/assets/sass/pages/_projects.sass
index 9cb0bbda..523b1f9d 100644
--- a/assets/sass/pages/_projects.sass
+++ b/assets/sass/pages/_projects.sass
@@ -1,5 +1,5 @@
-.project
-    &__company--has-logo
+.project-company
+    &.has-logo
         a:link,
         a:hover
             border-bottom: 0
@@ -8,8 +8,8 @@
         img
             max-width: 75%
 
-            +breakpoint($screen-sm)
+            +tablet
                 max-width: 50%
 
-            +breakpoint($screen-md)
+            +desktop
                 max-width: 33.3%
diff --git a/assets/sass/site.sass b/assets/sass/site.sass
index c6c445be..fe9bfa21 100644
--- a/assets/sass/site.sass
+++ b/assets/sass/site.sass
@@ -2,5 +2,6 @@
 @import '../../vendor/bower_components/compass-breakpoint/stylesheets/breakpoint'
 
 @import 'base'
+@import 'mixins'
 @import 'components/**/*'
 @import 'pages/**/*'
diff --git a/source/_partials/project/company.html.twig b/source/_partials/project/company.html.twig
index 466e2bc1..baf774c9 100644
--- a/source/_partials/project/company.html.twig
+++ b/source/_partials/project/company.html.twig
@@ -1,7 +1,7 @@
 {% if page.company %}
     {% set company = site.companies[page.company] %}
 
-    <div class="project__company project__company--{{ company.logo ? 'has-logo' : 'no-logo' }}">
+    <div class="project-company {{ company.logo ? 'has-logo' : 'no-logo' }}">
         <h2>Built {{ page.freelance ? 'for' : 'whilst at' }}</h2>
 
         {% if company.logo %}