improve parallax

in general but especially for camp picture
now with media queries and different pictures

app/assets/stylesheets/_camp.sass

@@ -0,0 +1,16 @@
+
+.camp_header
+  @include fixed_header_sizes
+  background:
+    image: image-url("camp/camp_fiskars.jpg")
+  @media only screen and (max-width: 840px)
+    background-image: image-url("camp/camp_fiskars_small.jpg")
+  @media only screen and (max-width: 640px)
+    height: 400px
+    background-image: image-url("camp/camp_fiskars_mini.jpg")
+    background-size: auto 400px
+
+.parallax_garden
+  @include fixed_header_sizes
+  background:
+    image: image-url("camp/camp_garden.jpg")

app/assets/stylesheets/_web_dev.sass

@@ -10,10 +10,12 @@
     font-size: 1.3rem
     text-align: center
 
-.heading , .parallax
+
+@mixin fixed_header_sizes
   height: 500px
   color: white
   text-align: center
+  margin-top: 0px
   h1
     margin-top: 60px
     margin-bottom: 60px
@@ -36,6 +38,9 @@
       margin-bottom: 20px
       font-size: 3.2rem
 
+.heading , .parallax
+  @include fixed_header_sizes()
+
 .section
   margin-top: 60px
   &::before
@@ -62,11 +67,11 @@ h4 , h5 , h6
 
 .parallax
   margin-top: 0px
-  background-attachment: fixed
-  background-position: center
-  background-repeat: no-repeat
-  background-size: cover
-  background-position: 50% 0px
+  background:
+    attachment: fixed
+    repeat: no-repeat
+    size: auto 500px
+    position: 50% 0px
 
 .height-500
   height: 500px

app/assets/stylesheets/application.scss

@@ -23,8 +23,9 @@ $susy: (
 );
 
 @import 'bootstrap';
-@import "course";
 @import "web_dev";
+@import "camp";
+@import "course";
 @import "layout";
 @import "answers";
 @import "fancy";

app/views/pages/camp.html.haml

@@ -1,7 +1,7 @@
 - title! "The Camp"
 - description! "The camp is an old school in Finland. Accommodation and board is included in the course. Beautiful nature"
 
-.section.parallax{:style => "background-image: url('#{image_url("camp/camp_fiskars.jpg")}'); background-position: 50% 0px;"}
+.section.camp_header
   %h1
     Live in nature, learn to code
   .action
@@ -12,7 +12,7 @@
     .row
       .col-md-12.subtext
         %p
-          Attending a Bootcamp can move you up from the tech career ladder,
+          Attending a Bootcamp can move you up in the tech career ladder,
           but that often means quitting a job, uprooting your life, or moving to a new place.
           Committing to a full-time, intensive Bootcamp also means that you have no time to work
           for money while still having to pay for other fees like food and accommodation, which could be stressful since
@@ -69,7 +69,7 @@
           our big kitchen. The local supermarket is just 5 minutes walk from the camp which provides a wide range of food
           options.
 
-.section.parallax{:style => "background-image: url('#{image_url("camp/camp_garden.jpg")}'); background-position: 50% 0px;"}
+.section.parallax_garden
   %h1
     Surrounded by nature
   %h2