gallery done

mate-academy · Sep 19, 2024 · e9ff4c8 · e9ff4c8
1 parent 5b70f35
commit e9ff4c8
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
+  }
 }