Add sass mixins, update experience

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

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%

assets/sass/site.sass

@@ -2,5 +2,6 @@
 @import '../../vendor/bower_components/compass-breakpoint/stylesheets/breakpoint'
 
 @import 'base'
+@import 'mixins'
 @import 'components/**/*'
 @import 'pages/**/*'

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 %}