solution 1

src/scripts/main.js

@@ -1 +1,44 @@
 'use strict';
+
+/* global IntersectionObserver */
+
+document.addEventListener('DOMContentLoaded', () => {
+  const slider = document.getElementById('gallery-slider');
+  const items = document.querySelectorAll('.gallery__item');
+  const dots = document.querySelectorAll('.gallery__dot');
+
+  if (slider && dots.length > 0) {
+    const observerOptions = {
+      root: slider,
+      threshold: 0.6,
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const index = Array.from(items).indexOf(entry.target);
+
+          dots.forEach((dot) => dot.classList.remove('gallery__dot--active'));
+
+          if (dots[index]) {
+            dots[index].classList.add('gallery__dot--active');
+          }
+        }
+      });
+    }, observerOptions);
+
+    items.forEach((i) => observer.observe(i));
+
+    dots.forEach((dot, index) => {
+      dot.addEventListener('click', () => {
+        if (items[index]) {
+          items[index].scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest',
+            inline: 'center',
+          });
+        }
+      });
+    });
+  }
+});

src/styles/_utils.scss

@@ -1,3 +1,18 @@
 @import 'utils/vars';
 @import 'utils/mixins';
-@import 'utils/extends';
+
+@import 'blocks/page';
+@import 'blocks/button';
+@import 'blocks/header';
+@import 'blocks/icon';
+@import 'blocks/nav';
+@import 'blocks/schedule';
+@import 'blocks/menu';
+@import 'blocks/main';
+@import 'blocks/actual-events';
+@import 'blocks/event';
+@import 'blocks/lecture';
+@import 'blocks/gallery';
+@import 'blocks/about-us';
+@import 'blocks/contacts';
+@import 'blocks/contact-info';

src/styles/blocks/about-us.scss

@@ -0,0 +1,58 @@
+.about-us {
+  &__bg-photo {
+    display: block;
+    grid-column: 1 / -1;
+    grid-row: 1;
+
+    min-height: 45vh;
+
+    object-fit: cover;
+
+    @include bg-photo;
+  }
+
+  &__wrapper {
+    position: relative;
+    align-items: center;
+    width: 100%;
+
+    @include page-grid;
+  }
+
+  &__content {
+    grid-column: 1 / -1;
+    grid-row: 1;
+    color: $color-light;
+
+    @include on-tablet {
+      grid-column: 2 / 6;
+    }
+
+    @include on-desktop {
+      grid-column: 4 / 10;
+    }
+  }
+
+  &__description {
+    margin-top: 20px;
+    font-size: 18px;
+    text-align: center;
+
+    @include on-tablet {
+      margin-top: 16px;
+    }
+  }
+
+  &__button {
+    width: 100%;
+    margin-top: 50px;
+
+    @include on-tablet {
+      margin-top: 64px;
+    }
+
+    @include on-desktop {
+      margin-top: 72px;
+    }
+  }
+}

src/styles/blocks/actual-events.scss

@@ -0,0 +1,28 @@
+.actual-events {
+  margin-bottom: 60px;
+
+  @include on-tablet {
+    margin: 88px 0 104px;
+  }
+
+  @include on-desktop {
+    margin-top: 200px;
+  }
+
+  &__wrapper {
+    display: grid;
+    row-gap: 60px;
+    width: 100%;
+    margin-top: 40px;
+
+    @include on-tablet {
+      row-gap: 64px;
+      margin-top: 48px;
+    }
+
+    @include on-desktop {
+      row-gap: 104px;
+      margin-top: 56px;
+    }
+  }
+}