diff --git a/TODO.txt b/TODO.txt
index b60d199..d05edb2 100644
--- a/TODO.txt
+++ b/TODO.txt
@@ -8,3 +8,5 @@
 7. "Polaroid" image galleries alongside the usual ones. Also need to be able to fullscreen the images on click as usual. This should not be a CSS-only change or a custom CSS because we should have these galleries alongside the "usual" ones.
 8. CUSTOM CLASS for the section? This actually might save us from differentiating 7.) and the usual image gallery maybe? (7 alone good too)
 9. Make navmenu configurable in the main settings.yaml file. This is useful in case the navmenu appears at multiple pages and we do not want to duplicate information like blog, rss, email...
+10. Multiple image size generation (not only hi+midres): need really small images for small screens and old machines.
+11. Specify which image to download from the server according to media query. Current way it downloads both I think which is worst. Also on small screens there is no need at all to download 3k images and such because there is no point for it at all!
diff --git a/prosopopee/themes/exposure/static/css/style.css b/prosopopee/themes/exposure/static/css/style.css
index 39fc96f..9a5549c 100644
--- a/prosopopee/themes/exposure/static/css/style.css
+++ b/prosopopee/themes/exposure/static/css/style.css
@@ -551,3 +551,43 @@ nav ul ul ul li {
 
 #nav li > a:only-child:after {content: ''; }
 /* END: navmenu */
+
+/* START: polaroid-group */
+a.polaroid {
+    display: block;
+    padding: 10px 10px 25px 10px;
+    border: 2px solid #BFBFBF;
+    /*background-color: white;*/
+    z-index: 2;
+    font-size: 0.7em;
+    /* Shadows around the box */
+    -webkit-box-shadow: 5px 5px 6px rgba(149,150,151,0.3);
+    -moz-box-shadow: 5px 5px 6px rgba(149,150,151,0.3);
+    box-shadow: 5px 5px 6px rgba(149,150,151,0.3);
+    /* Transition to lower speed when removing rotation on hover */
+    -webkit-transition: -webkit-transform 0.6s ease-in;
+    transition: width 1s, height 1s, transform 1s;
+    -moz-transition: width 1s, height 1s, -moz-transform 1s;
+    -ms-transition: width 1s, height 1s, -ms-transform 1s;
+    -webkit-transition: width 1s, height 1s, -webkit-transform 1s;
+    -o-transition: width 1s, height 1s,-o-transform 1s;
+
+}
+
+/* Remove rotation and make it visible (z-index) */
+a.polaroid:hover,
+a.polaroid:focus,
+a.polaroid:active {
+        z-index: 100;
+        -webkit-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -ms-transform: rotate(0deg);
+        transform: rotate(0deg);
+}
+
+a.polaroid img {
+        border: none;
+        display: block;
+}
+
+/* END: polaroid-group */
diff --git a/prosopopee/themes/exposure/templates/sections/polariod-group.html b/prosopopee/themes/exposure/templates/sections/polariod-group.html
new file mode 100644
index 0000000..c319b87
--- /dev/null
+++ b/prosopopee/themes/exposure/templates/sections/polariod-group.html
@@ -0,0 +1,50 @@
+{% if section.background %}
+<div class="bg-section" style="background: {{ section.background }};">
+{% endif %}
+    <section class="polaroid-group baguette" {% if section.css %}style="{{ section.css }}"{% endif %} >
+    <div class="polaroid-line" style="width: 100%; height: 33vh;">
+    {% for image in line %}
+        {% set caption = image.text %}
+        {% if image.angle %}
+           {% set angle = image.angle %}
+        {% else %}
+            {% set angle = 20 %}
+        {% endif %}
+        {% if image.x %}
+            {% set x = image.x %}
+        {% else %}
+            {% set x = "0px" %}
+        {% if image.y %}
+            {% set y = image.y %}
+        {% else %}
+            {% set y = "0px" %}
+        {% endif %}
+        {% if image.z %}
+            {% set z = image.z %}
+        {% else %}
+            {% set z = 2 %}
+        {% endif %}
+        {% set image = Image(image) %}
+        {{ image.copy() }}
+        {% set ratio = image.ratio %}
+        <a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}
+            data-at-450="{{ image.generate_thumbnail("x450") }}"
+            data-at-800="{{ image.generate_thumbnail("x800") }}"
+            data-at-1366="{{ image.generate_thumbnail("x1366") }}"
+            data-at-1920="{{ image.generate_thumbnail("x1920") }}"
+            class="polaroid"
+            style="left: {{ x }}; top: {{ y }}; z-index: {{ z }}; -webkit-transform: rotate({{ angle }}deg); -moz-transform: rotate({{ angle }}deg); transform: rotate({{ angle }}deg);">
+                {% if caption %}
+                <img class="lazy" src="" data-original="{{ image.generate_thumbnail("x450") }}" alt="{{ caption }}">
+                <h5 class="polaroid__title">{{ caption }}</h5>
+                {% else %}
+                <img class="lazy" src="" data-original="{{ image.generate_thumbnail("x450") }}" alt="unnamed image">
+                {% endif %}
+        </a>
+    </div>
+    {% endfor %}
+{% if section.background %}
+</div>
+{% endif %}
+<!-- vim: ts=8 et sw=4 sts=4
+-->