diff --git a/static/images/screenshots/1-en.png b/assets/images/screenshots/en/1.png
similarity index 100%
rename from static/images/screenshots/1-en.png
rename to assets/images/screenshots/en/1.png
diff --git a/static/images/screenshots/2-en.png b/assets/images/screenshots/en/2.png
similarity index 100%
rename from static/images/screenshots/2-en.png
rename to assets/images/screenshots/en/2.png
diff --git a/static/images/screenshots/3-en.png b/assets/images/screenshots/en/3.png
similarity index 100%
rename from static/images/screenshots/3-en.png
rename to assets/images/screenshots/en/3.png
diff --git a/static/images/screenshots/4-en.png b/assets/images/screenshots/en/4.png
similarity index 100%
rename from static/images/screenshots/4-en.png
rename to assets/images/screenshots/en/4.png
diff --git a/static/images/screenshots/5-en.png b/assets/images/screenshots/en/5.png
similarity index 100%
rename from static/images/screenshots/5-en.png
rename to assets/images/screenshots/en/5.png
diff --git a/static/images/screenshots/6-en.png b/assets/images/screenshots/en/6.png
similarity index 100%
rename from static/images/screenshots/6-en.png
rename to assets/images/screenshots/en/6.png
diff --git a/static/images/screenshots/7-en.png b/assets/images/screenshots/en/7.png
similarity index 100%
rename from static/images/screenshots/7-en.png
rename to assets/images/screenshots/en/7.png
diff --git a/static/images/screenshots/1-ru.png b/assets/images/screenshots/ru/1.png
similarity index 100%
rename from static/images/screenshots/1-ru.png
rename to assets/images/screenshots/ru/1.png
diff --git a/static/images/screenshots/2-ru.png b/assets/images/screenshots/ru/2.png
similarity index 100%
rename from static/images/screenshots/2-ru.png
rename to assets/images/screenshots/ru/2.png
diff --git a/static/images/screenshots/3-ru.png b/assets/images/screenshots/ru/3.png
similarity index 100%
rename from static/images/screenshots/3-ru.png
rename to assets/images/screenshots/ru/3.png
diff --git a/static/images/screenshots/4-ru.png b/assets/images/screenshots/ru/4.png
similarity index 100%
rename from static/images/screenshots/4-ru.png
rename to assets/images/screenshots/ru/4.png
diff --git a/static/images/screenshots/5-ru.png b/assets/images/screenshots/ru/5.png
similarity index 100%
rename from static/images/screenshots/5-ru.png
rename to assets/images/screenshots/ru/5.png
diff --git a/static/images/screenshots/6-ru.png b/assets/images/screenshots/ru/6.png
similarity index 100%
rename from static/images/screenshots/6-ru.png
rename to assets/images/screenshots/ru/6.png
diff --git a/static/images/screenshots/7-ru.png b/assets/images/screenshots/ru/7.png
similarity index 100%
rename from static/images/screenshots/7-ru.png
rename to assets/images/screenshots/ru/7.png
diff --git a/content/en/_index.html b/content/en/_index.html
index 56fc256..afb5a70 100644
--- a/content/en/_index.html
+++ b/content/en/_index.html
@@ -5,53 +5,12 @@ linkTitle = "SelfPrivacy"
 +++
 
 {{< blocks/section color="dark" type="section" >}}
-	<div class="flex-md-row flex-column-reverse d-flex justify-content-center align-content-center">
+	<div class="flex-md-row flex-column-reverse  d-flex justify-content-center align-content-center">
 		<div class="col-xs-12 col-md-4">
 			<div class="container rounded">
-				<div id="screenshotsCarouselControls" class="carousel slide" data-bs-ride="carousel">
-				  <div class="carousel-inner rounded">
-					<div class="carousel-item active">
-					  <img class="d-block w-100" src="/images/screenshots/1-en.png" alt="First slide">
-					</div>
-					<div class="carousel-item">
-					  <img class="d-block w-100" src="/images/screenshots/2-en.png" alt="Second slide">
-					</div>
-					<div class="carousel-item active">
-					  <img class="d-block w-100" src="/images/screenshots/3-en.png" alt="Third slide">
-					</div>
-					  <div class="carousel-item">
-					  <img class="d-block w-100" src="/images/screenshots/4-en.png" alt="Fourth slide">
-					</div>
-					  <div class="carousel-item">
-					  <img class="d-block w-100" src="/images/screenshots/5-en.png" alt="Fifth slide">
-					</div>
-					<div class="carousel-item">
-						<img class="d-block w-100" src="/images/screenshots/6-en.png" alt="Sixth slide">
-					</div>
-					<div class="carousel-item">
-						<img class="d-block w-100" src="/images/screenshots/7-en.png" alt="Seventh slide">
-					</div>
-				  </div>
-				  <div class="carousel-indicators">
-					<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="0" class="active" aria-current="true"></button>
-					<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="1"></button>
-					<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="2"></button>
-					<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="3"></button>
-					<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="4"></button>
-					<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="5"></button>
-					<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="6"></button>
-				  </div>
-				  <button class="carousel-control-prev" type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide="prev">
-					<span class="carousel-control-prev-icon" aria-hidden="true"></span>
-					<span class="visually-hidden">Previous</span>
-				  </button>
-				  <button class="carousel-control-next" type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide="next">
-					<span class="carousel-control-next-icon" aria-hidden="true"></span>
-					<span class="visually-hidden">Next</span>
-				  </button>	
-				  </div>
+				{{< responsive-carousel >}}	
 			</div>
- 		</div>
+		</div>
 		<div class="col-xs-12 col-md-8 col-lg-6 my-auto">
 			<div class="container my-4">
 				<h1>
@@ -62,7 +21,7 @@ linkTitle = "SelfPrivacy"
 				</a>
 			</div>
 		</div>
-</div>
+	</div>
 {{< /blocks/section >}}
 
 <section class="px-5">
diff --git a/content/ru/_index.html b/content/ru/_index.html
index a0b9103..4e61b1c 100644
--- a/content/ru/_index.html
+++ b/content/ru/_index.html
@@ -4,52 +4,11 @@ linkTitle = "SelfPrivacy"
 
 +++
 
-{{< blocks/section color="dark" type="section">}}
+{{< blocks/section color="dark" type="section" >}}
 	<div class="flex-md-row flex-column-reverse d-flex justify-content-center align-content-center">
 		<div class="col-xs-12 col-md-4">
 			<div class="container rounded">
-				<div id="screenshotsCarouselControls" class="carousel slide" data-bs-ride="carousel">
-					<div class="carousel-inner rounded">
-						<div class="carousel-item">
-							<img class="d-block w-100" src="/images/screenshots/1-ru.png" alt="Первый слайд">
-						</div>
-						<div class="carousel-item">
-							<img class="d-block w-100" src="/images/screenshots/2-ru.png" alt="Второй слайд">
-						</div>
-						<div class="carousel-item active">
-							<img class="d-block w-100" src="/images/screenshots/3-ru.png" alt="Третий слайд">
-						</div>
-						<div class="carousel-item">
-							<img class="d-block w-100" src="/images/screenshots/4-ru.png" alt="Четвёртый слайд">
-						</div>
-						<div class="carousel-item">
-							<img class="d-block w-100" src="/images/screenshots/5-ru.png" alt="Пятый слайд">
-						</div>
-						<div class="carousel-item">
-							<img class="d-block w-100" src="/images/screenshots/6-ru.png" alt="Шестой слайд">
-						</div>
-						<div class="carousel-item">
-							<img class="d-block w-100" src="/images/screenshots/7-ru.png" alt="Седьмой слайд">
-						</div>
-					</div>
-					<ol class="carousel-indicators">
-						<li data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="0" class="active"></li>
-						<li data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="1"></li>
-						<li data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="2"></li>
-						<li data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="3"></li>
-						<li data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="4"></li>
-						<li data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="5"></li>
-						<li data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="6"></li>
-					</ol>
-					<button class="carousel-control-prev" type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide="prev">
-						<span class="carousel-control-prev-icon" aria-hidden="true"></span>
-						<span class="visually-hidden">Назад</span>
-					  </button>
-					  <button class="carousel-control-next" type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide="next">
-						<span class="carousel-control-next-icon" aria-hidden="true"></span>
-						<span class="visually-hidden">Далее</span>
-					  </button>					
-				</div>
+				{{< responsive-carousel >}}
 			</div>
 		</div>
 		<div class="col-xs-12 col-md-8 col-lg-6 my-auto">
@@ -64,13 +23,13 @@ linkTitle = "SelfPrivacy"
 			</div>
 		</div>
 	</div>
-	{{< /blocks/section>}}
+{{< /blocks/section>}}
 
 	<section class="px-5">
 			<div class="w-100">
 				<h2 class="mx-auto text-center font-weight-bolder">Ваши личные сервисы</h2>
 			</div>
-
+	
 			<div class="sp-service-container">
 				<div class="w-100 mb-3">
 					<h3 class="mx-auto text-center">Для серьезных дел</h3>
diff --git a/layouts/shortcodes/responsive-carousel.html b/layouts/shortcodes/responsive-carousel.html
new file mode 100644
index 0000000..46056a9
--- /dev/null
+++ b/layouts/shortcodes/responsive-carousel.html
@@ -0,0 +1,51 @@
+{{ $lang := .Page.Lang }}
+{{ $srcFiles := (resources.Match (printf "images/screenshots/%s/*" $lang)) }}
+
+{{ $tinyw := default "500" }}
+{{ $smallw := default "800" }}
+{{ $mediumw := default "1200" }}
+{{ $largew := default "2400" }}
+
+<div id="screenshotsCarouselControls" class="carousel slide" data-bs-ride="false">
+  <div class="carousel-indicators">
+    {{ range $i, $src := $srcFiles }}
+      <button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="{{ $i }}" {{ if eq $i 0 }} class="active" aria-current="true" {{ end }}></button>
+    {{ end }}
+  </div>
+  <button class="carousel-control-prev" type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide="prev">
+    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+    <span class="visually-hidden">Previous</span>
+  </button>
+  <button class="carousel-control-next" type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide="next">
+    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+    <span class="visually-hidden">Next</span>
+  </button>
+  <div class="carousel-inner rounded">
+    {{ range $i, $src := $srcFiles }}
+
+      {{ $tiny := $src.Resize (printf "%sx" $tinyw) }}
+      {{ $small := $src.Resize (printf "%sx" $smallw) }}
+      {{ $medium:= $src.Resize (printf "%sx" $mediumw) }}
+      {{ $large := $src.Resize (printf "%sx" $largew) }}
+
+      <div class="carousel-item {{ if eq $i 0 }} active {{ end }}">
+        <img
+          class = "d-block w-100"
+          srcset='
+            {{ with $tiny.RelPermalink }} {{.}} {{(printf "%sw" $tinyw)}} {{ end }},
+            {{ with $small.RelPermalink }} {{.}} {{(printf "%sw" $smallw)}} {{ end }},
+            {{ with $medium.RelPermalink }} {{.}} {{(printf "%sw" $mediumw)}} {{ end }},
+            {{ with $large.RelPermalink }} {{.}} {{(printf "%sw" $largew)}} {{ end }}
+          '
+          sizes='
+            (max-width: {{(printf "%spx" $tinyw)}}) {{(printf "%spx" $tinyw)}},
+            (max-width: {{(printf "%spx" $smallw)}}) {{(printf "%spx" $smallw)}},
+            (max-width: {{(printf "%spx" $mediumw)}}) {{(printf "%spx" $mediumw)}},
+            (max-width: {{(printf "%spx" $largew)}}) {{(printf "%spx" $largew)}},
+            100%
+          '
+        >
+      </div>
+    {{ end }}
+  </div>
+</div>
diff --git a/layouts/shortcodes/responsive-img.html b/layouts/shortcodes/responsive-img.html
new file mode 100644
index 0000000..6964da9
--- /dev/null
+++ b/layouts/shortcodes/responsive-img.html
@@ -0,0 +1,30 @@
+{{ $src := ( resources.Get ( .Get 0 ) ) }}
+
+{{ $tinyw := default "500" }}
+{{ $smallw := default "800" }}
+{{ $mediumw := default "1200" }}
+{{ $largew := default "2400" }}
+
+{{ $tiny := $src.Resize (printf "%sx" $tinyw) }}
+{{ $small := $src.Resize (printf "%sx" $smallw) }}
+{{ $medium:= $src.Resize (printf "%sx" $mediumw) }}
+{{ $large := $src.Resize (printf "%sx" $largew) }}
+
+<img
+    {{ with ( .Get 1 ) }}
+        class = "{{ . }}"
+    {{ end }}
+    srcset='
+    {{ with $tiny.RelPermalink }} {{.}} {{(printf "%sw" $tinyw)}} {{ end }},
+    {{ with $small.RelPermalink }} {{.}} {{(printf "%sw" $smallw)}} {{ end }},
+    {{ with $medium.RelPermalink }} {{.}} {{(printf "%sw" $mediumw)}} {{ end }},
+    {{ with $large.RelPermalink }} {{.}} {{(printf "%sw" $largew)}} {{ end }}
+    '
+    sizes='
+    (max-width: {{(printf "%spx" $tinyw)}}) {{(printf "%spx" $tinyw)}},
+    (max-width: {{(printf "%spx" $smallw)}}) {{(printf "%spx" $smallw)}},
+    (max-width: {{(printf "%spx" $mediumw)}}) {{(printf "%spx" $mediumw)}},
+    (max-width: {{(printf "%spx" $largew)}}) {{(printf "%spx" $largew)}},
+    100%
+    '
+>
\ No newline at end of file