From e9ff4c88329e28bba4862d93d752a4d7ad71914c Mon Sep 17 00:00:00 2001
From: Iryna Mariiko <IrynaMM497@gmail.com>
Date: Thu, 19 Sep 2024 19:31:48 +0300
Subject: [PATCH] gallery done

---
 src/index.html                 |  2 +-
 src/styles/blocks/gallery.scss |  4 ++--
 src/styles/blocks/page.scss    |  7 +++++++
 src/styles/utils/_mixins.scss  | 10 ++++++++++
 4 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/index.html b/src/index.html
index 8708e32a9..a39d004bf 100644
--- a/src/index.html
+++ b/src/index.html
@@ -107,7 +107,7 @@ <h1 class="header__title">Художній музей</h1>
     </aside>
     <div class="page-overlay"></div>
 
-    <main class="main">
+    <main class="main page__main">
       <div class="container">
         <section class="main__current" id="current-events">
           <h1 class="main__title">Актуальні події</h1>
diff --git a/src/styles/blocks/gallery.scss b/src/styles/blocks/gallery.scss
index 43c2c3202..08ae179f1 100644
--- a/src/styles/blocks/gallery.scss
+++ b/src/styles/blocks/gallery.scss
@@ -137,11 +137,11 @@
   }
 
   [id='radio3']:checked ~ .first {
-    margin-left: -15%;
+    margin-left: -16%;
   }
 
   [id='radio4']:checked ~ .first {
-    margin-left: -24%;
+    margin-left: -20%;
   }
 }
 
diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss
index 755bb3ce1..bf6bb14aa 100644
--- a/src/styles/blocks/page.scss
+++ b/src/styles/blocks/page.scss
@@ -42,3 +42,10 @@ body {
 .menu:target ~ .header {
   background-color: rgba(0, 0, 0, 0.5); /* Якщо хочете, щоб хедер також змінився */
 }
+
+.page__main {
+  --columns: 6;
+
+  display: grid;
+  column-gap: 30px;
+}
diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss
index a0b5632cb..33ef17d6d 100644
--- a/src/styles/utils/_mixins.scss
+++ b/src/styles/utils/_mixins.scss
@@ -23,4 +23,14 @@
   display: grid;
   column-gap: 20px;
   grid-template-columns: repeat(var(--columns), 1fr);
+
+  @include on-tablet {
+    --columns: 6;
+
+    column-gap: 30px;
+  }
+
+  @include on-desktop {
+    --columns: 12;
+  }
 }