From 17a6516bd7523a394ccbc87ab12aed4e8275d2be Mon Sep 17 00:00:00 2001
From: Ivlev Denis <di-erz@yandex.ru>
Date: Fri, 11 May 2018 14:35:53 +0300
Subject: [PATCH] Update gallery styles

---
 project/templates/blocks/gallery.html | 82 +++++++++++++++++++--------
 web/src/sass/_common.sass             | 14 +++--
 2 files changed, 69 insertions(+), 27 deletions(-)

diff --git a/project/templates/blocks/gallery.html b/project/templates/blocks/gallery.html
index d6b7a43f..a07537e7 100644
--- a/project/templates/blocks/gallery.html
+++ b/project/templates/blocks/gallery.html
@@ -11,43 +11,79 @@
     </div>
     <div class="gallery">
       <div class="gallery__grid">
-        <div class="gallery__item gallery__item_lg">
+        <div
+        class="gallery__item gallery__item_lg"
+        style="background-image: url({% get_media_prefix %}instagram/results/0.jpg);"
+        >
           <img class="gallery__pic" src="{% get_media_prefix %}instagram/results/0.jpg" onerror="this.style.display='none'">
         </div>
-        <div class="gallery__item">
-          <img class="gallery__pic" src="{% get_media_prefix %}instagram/results/1.jpg" onerror="this.style.display='none'">
+        <div
+        class="gallery__item"
+        style="background-image: url({% get_media_prefix %}instagram/results/1.jpg);"
+        >
+          {% comment %} <img class="gallery__pic" src="{% get_media_prefix %}instagram/results/1.jpg" onerror="this.style.display='none'"> {% endcomment %}
         </div>
-        <div class="gallery__item">
-          <img class="gallery__pic" src="{% get_media_prefix %}instagram/results/2.jpg" onerror="this.style.display='none'">
+        <div
+        class="gallery__item"
+        style="background-image: url({% get_media_prefix %}instagram/results/2.jpg);"
+        >
+          {% comment %} <img class="gallery__pic" src="{% get_media_prefix %}instagram/results/2.jpg" onerror="this.style.display='none'"> {% endcomment %}
         </div>
-        <div class="gallery__item">
-          <img class="gallery__pic" src="{% get_media_prefix %}instagram/results/3.jpg" onerror="this.style.display='none'">
+        <div
+        class="gallery__item"
+        style="background-image: url({% get_media_prefix %}instagram/results/3.jpg);"
+        >
+          {% comment %} <img class="gallery__pic" src="{% get_media_prefix %}instagram/results/3.jpg" onerror="this.style.display='none'"> {% endcomment %}
         </div>
-        <div class="gallery__item">
-          <img class="gallery__pic" src="{% get_media_prefix %}instagram/results/4.jpg" onerror="this.style.display='none'">
+        <div
+        class="gallery__item"
+        style="background-image: url({% get_media_prefix %}instagram/results/4.jpg);"
+        >
+          {% comment %} <img class="gallery__pic" src="{% get_media_prefix %}instagram/results/4.jpg" onerror="this.style.display='none'"> {% endcomment %}
         </div>
-        <div class="gallery__item">
-          <img class="gallery__pic" src="{% get_media_prefix %}instagram/results/5.jpg" onerror="this.style.display='none'">
+        <div
+        class="gallery__item"
+        style="background-image: url({% get_media_prefix %}instagram/results/5.jpg);"
+        >
+          {% comment %} <img class="gallery__pic" src="{% get_media_prefix %}instagram/results/5.jpg" onerror="this.style.display='none'"> {% endcomment %}
         </div>
       </div>
       <div class="gallery__grid">
-        <div class="gallery__item">
-          <img class="gallery__pic" src="{% get_media_prefix %}instagram/results/6.jpg" onerror="this.style.display='none'">
+        <div
+        class="gallery__item"
+        style="background-image: url({% get_media_prefix %}instagram/results/6.jpg);"
+        >
+          {% comment %} <img class="gallery__pic" src="{% get_media_prefix %}instagram/results/6.jpg" onerror="this.style.display='none'"> {% endcomment %}
         </div>
-        <div class="gallery__item">
-          <img class="gallery__pic" src="{% get_media_prefix %}instagram/results/7.jpg" onerror="this.style.display='none'">
+        <div
+        class="gallery__item"
+        style="background-image: url({% get_media_prefix %}instagram/results/7.jpg);"
+        >
+          {% comment %} <img class="gallery__pic" src="{% get_media_prefix %}instagram/results/7.jpg" onerror="this.style.display='none'"> {% endcomment %}
         </div>
-        <div class="gallery__item">
-          <img class="gallery__pic" src="{% get_media_prefix %}instagram/results/8.jpg" onerror="this.style.display='none'">
+        <div
+        class="gallery__item"
+        style="background-image: url({% get_media_prefix %}instagram/results/8.jpg);"
+        >
+          {% comment %} <img class="gallery__pic" src="{% get_media_prefix %}instagram/results/8.jpg" onerror="this.style.display='none'"> {% endcomment %}
         </div>
-        <div class="gallery__item gallery__item_lg">
-          <img class="gallery__pic" src="{% get_media_prefix %}instagram/results/9.jpg" onerror="this.style.display='none'">
+        <div class="gallery__item gallery__item_lg"
+        style="background-image: url({% get_media_prefix %}instagram/results/9.jpg);"
+
+        >
+          {% comment %} <img class="gallery__pic" src="{% get_media_prefix %}instagram/results/9.jpg" onerror="this.style.display='none'"> {% endcomment %}
         </div>
-        <div class="gallery__item">
-          <img class="gallery__pic" src="{% get_media_prefix %}instagram/results/10.jpg" onerror="this.style.display='none'">
+        <div
+        class="gallery__item"
+        style="background-image: url({% get_media_prefix %}instagram/results/10.jpg);"
+        >
+          {% comment %} <img class="gallery__pic" src="{% get_media_prefix %}instagram/results/10.jpg" onerror="this.style.display='none'"> {% endcomment %}
         </div>
-        <div class="gallery__item">
-          <img class="gallery__pic" src="{% get_media_prefix %}instagram/results/11.jpg" onerror="this.style.display='none'">
+        <div
+        class="gallery__item"
+        style="background-image: url({% get_media_prefix %}instagram/results/11.jpg);"
+        >
+          {% comment %} <img class="gallery__pic" src="{% get_media_prefix %}instagram/results/11.jpg" onerror="this.style.display='none'"> {% endcomment %}
         </div>
       </div>
     </div>
diff --git a/web/src/sass/_common.sass b/web/src/sass/_common.sass
index a1d409e6..71830e31 100755
--- a/web/src/sass/_common.sass
+++ b/web/src/sass/_common.sass
@@ -47,7 +47,7 @@ $cl: #191919
     background-position: 100% 50%
   100%
     background-position: 0% 50%
-  
+
 body
   min-width: 360px
   +f
@@ -1319,16 +1319,22 @@ a[name]
     +t
       display: none
   &__item
+    background-position: center center;
+    background-size: cover;
     float: left
-    width: calc(33.33% - 20px)
+    width: 140px
+    height: 140px
     margin: 0 10px 20px
     +m
-      width: calc(33.33% - 10px)
+      width: 140px
+      height: 140px
       margin: 0 5px 10px
     &_lg
-      width: calc(66.66% - 20px)
+      width: 300px
+      height: 300px
       +m
         width: calc(66.66% - 10px)
+        height: calc(66.66% - 10px)
     &:nth-child(4)
       clear: both
   &__pic