Rendu des images sur petits écrans

Fix #113

src/agenda_culturel/static/style.scss

@@ -161,15 +161,25 @@ svg {
 }
 
 .illustration {
-    float: right;
+    width: 100%;
-    width: 20em;
-    margin: 0 0 0.5em .5em;
     padding: 0.3em;
+    margin: 0;
 }
 
-.illustration-small {
+@media only screen and (min-width: 550px) {
-    @extend .illustration;
+    .illustration {
-    width: 10em;
+        width: 40%;
+        float: right;
+        margin: 0 0 0.5em .5em;
+    }
+
+}
+
+@media only screen and (min-width: 992px) {
+    .illustration {
+        width: 20em;
+    }
+
 }
 
 footer {

src/agenda_culturel/templates/agenda_culturel/single-event/event-in-list-by-day-inc.html

@@ -42,7 +42,7 @@
         {% endif %}
 
         {% if event.image or event.local_image %}
-        <article class='illustration-small'>
+        <article class='illustration'>
             <img src="{% if event.local_image %}{{ event.local_image.url }}{% else %}{{ event.image }}{% endif %}" alt="{{ event.image_alt }}" />
         </article>
         {% endif %}