LIL-696 Адаптировать баннер для мобильных разрешений

project/templates/blocks/baner.html

@@ -1,7 +1,16 @@
 {% if baner %}
-<div class="banner" style="background-image: url({{ baner.image.url }}); display: none;" data-banner="{{baner.id}}">
+<div class="banner" style="/* background-image: url(); */ display: none;" data-banner="{{baner.id}}">
-  <span class="banner__text">{{ baner.text }}</span>
+  {% if request.user_agent.is_mobile %}
-  <a href="{{ baner.url }}" class="banner__link">{{ baner.button_text }}</a>
+  <a href="{{ baner.url }}">
+    <img class="banner__image" src="{{ baner.image.url }}" />
+  </a>
+  {% else %}
+  <img class="banner__image" src="{{ baner.image.url }}" />
+  <div class="banner__content">
+    <span class="banner__text">{{ baner.text }}</span>
+    <a href="{{ baner.url }}" class="banner__link">{{ baner.button_text }}</a>
+  </div>
+  {% endif %}
   <a href="#" class="banner__hide">Скрыть баннер</a>
 </div>
 {% endif %}

web/src/sass/_common.sass

@@ -4296,10 +4296,19 @@ a
   height: 140px
   text-align: center
   color: #fff
-  padding-top: 50px
+  background: white
-  background-repeat: no-repeat
+  +m
-  background-position: center
+    height: auto
-  background-size: cover
+  &__image
+    height: 100%
+    +m
+      height: auto
+      width: 100%
+      display: block
+  &__content
+    position: absolute
+    width: 100%
+    margin-top: -110px
   &__text
     font-size: 30px
     text-shadow: 0px 0px 3px rgba(0, 0, 0, 1)