Error

mate-academy · Jul 24, 2024 · ec1dccd · ec1dccd
1 parent a6313cc
commit ec1dccd
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 5 deletions.
diff --git a/src/index.html b/src/index.html
@@ -209,7 +209,7 @@ <h3 class="title title__hours">The Met Cloisters</h3>
         </div>
       </section>
       <section
-        class="section secion__galery"
+        class="section section__galery"
         id="gallery"
       >
         <div class="section__wrapper">
@@ -218,7 +218,7 @@ <h2 class="title title__galery">Now On View</h2>
             Explore exhibition gallery guides, videos, articles, and more.
           </p>
         </div>
-        <article class="article">
+        <article class="article article__galery--1">
           <div class="picture">
             <img
               class="picture__item picture__item--long picture__item--long-left"
@@ -236,7 +236,7 @@ <h2 class="title title__galery">Now On View</h2>
             <p class="paragraph">December 12, 2020 – Through Spring 2023</p>
           </div>
         </article>
-        <article class="article">
+        <article class="article article__galery--2">
           <div class="picture picture__small">
             <img
               class="picture__item"
@@ -261,7 +261,7 @@ <h2 class="title title__galery">Now On View</h2>
             <p class="paragraph">March 27, 2021 – October 30, 2022</p>
           </div>
         </article>
-        <article class="article">
+        <article class="article article__galery--3">
           <div class="picture">
             <img
               class="picture__item"

diff --git a/src/styles/blocks/article.scss b/src/styles/blocks/article.scss
@@ -2,6 +2,51 @@
   display: flex;
   flex-direction: column;
   gap: 24px;
+  width: 100%;
+
+  &__galery {
+    &--1 {
+      justify-content: center;
+      margin: 0 auto;
+      align-items: center;
+
+      @media (min-width: 744px) {
+        grid-area: 2 / 1 / 3 / 7;
+      }
+
+      @media (min-width: 1020px) {
+        grid-area: 2 / 1 / 3 / 13;
+      }
+    }
+
+    &--2 {
+      justify-content: center;
+      margin: 0 auto;
+      align-items: center;
+
+      @media (min-width: 744px) {
+        grid-area: 3 / 1 / 4 / 7;
+      }
+
+      @media (min-width: 1020px) {
+        grid-area: 3 / 1 / 4 / 13;
+      }
+    }
+
+    &--3 {
+      justify-content: center;
+      margin: 0 auto;
+      align-items: center;
+
+      @media (min-width: 744px) {
+        grid-area: 4 / 1 / 5 / 7;
+      }
+
+      @media (min-width: 1020px) {
+        grid-area: 4 / 1 / 5 / 13;
+      }
+    }
+  }
 
   &__container {
     display: flex;

diff --git a/src/styles/blocks/picture.scss b/src/styles/blocks/picture.scss
@@ -3,6 +3,12 @@
   gap: 20px;
   width: 280px;
   height: 130px;
+  justify-content: center;
+
+  @media (min-width: 744px) {
+    height: 320px;
+    width: 320px;
+  }
 
   &__item {
     width: auto;
@@ -18,6 +24,12 @@
         height: 130px;
         object-fit: cover;
         object-position: -45px;
+
+        @media (min-width: 744px) {
+          height: 320px;
+          width: auto;
+          object-position: 0;
+        }
       }
 
       &-right {

diff --git a/src/styles/blocks/section.scss b/src/styles/blocks/section.scss
@@ -1,5 +1,6 @@
 .section {
   padding: 0 20px;
+  box-sizing: border-box;
 
   &__hours {
     display: grid;
@@ -26,10 +27,27 @@
 
   &__galery {
     display: grid;
-    gap: 48px;
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows: 110px 264px 192px 262px;
+    justify-content: center;
+    gap: 24px;
+
+    @media (min-width: 1020px) {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      grid-template-rows: 121px 235px 192px 262px;
+      justify-content: center;
+      gap: 24px;
+    }
   }
 
   &__wrapper {
+    grid-area: 1 / 1 / 2 / 7;
+
+    @media (min-width: 1020px) {
+      grid-area: 1 / 1 / 2 / 4;
+    }
+
     display: flex;
     flex-direction: column;
     gap: 8px;