task 3 with media and table of themes work

index.html

@@ -68,6 +68,28 @@ <h2 class="section-title">About creator</h2>
                     </div>
                 </div>
             </section>
+            <section class="menu-section">
+                <h2 class="section-title">Topics</h2>
+                <div class="section-content">
+                    <ul class="menu-list">
+                        <li class="menu-item">
+                            <img src="imgs/ownership.png" alt="Ownership" class="menu-image">
+                            <h3 class="name">Ownership</h3>
+                            <p class="text">New concepts of memory controle</p>
+                        </li>
+                        <li class="menu-item">
+                            <img src="imgs/smart-pointers.png" alt="SmartPointers" class="menu-image">
+                            <h3 class="name">Smart pointers</h3>
+                            <p class="text">Work with old but gold ideas</p>
+                        </li>
+                        <li class="menu-item">
+                            <img src="imgs/traits.png" alt="Traits" class="menu-image">
+                            <h3 class="name">Traits</h3>
+                            <p class="text">Look like interfaces but don't believe them</p>
+                        </li>
+                    </ul>
+                </div>
+            </section>
         </main>
         <aside>
             <h1>Темы моего сайта</h1>

index_style.css

@@ -209,7 +209,60 @@ header .nav-bar {
 
 }
 
-@media screen and (max-width: 575px) {
+.menu-section {
+    color: var(--white-color);
+    background: var(--dark-color);
+    padding: 50px 0 100px;
+}
+
+.menu-section .menu-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 100px;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.menu-section .menu-list .menu-item {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    text-align: center;
+    justify-content: space-between;
+    width: calc(100% / 3 - 110px);
+}
+
+.menu-section .menu-list .menu-item .menu-image {
+    max-width: 83%;
+    aspect-ratio: 1; 
+    margin-bottom: 15px;
+    object-fit: contain;
+}
+
+.menu-section .menu-list .menu-item .text {
+    font-size: var(--font-size-m);
+}
+
+.menu-section .menu-list .menu-item .name {
+    margin: 12px 0;
+    font-size: var(--font-size-l);
+    font-weight: var(--font-weight-semibold);
+
+}
+
+@media screen and (max-width: 1024px) {
+
+    .menu-section .menu-list {
+        gap: 60px;
+    }
+
+    .menu-section .menu-list .menu-item {
+        width: calc(100% / 3 - 60px);
+    }
+
+}
+
+@media screen and (max-width: 900px) {
 
     :root {
         --font-size-s: 0.7rem;
@@ -302,4 +355,16 @@ header .nav-bar {
         max-width: 250px;
     }
 
+    .menu-section .menu-list {
+        gap: 30px;
+    }
+
+    .menu-section .menu-list .menu-item {
+        width: calc(100% / 2 - 30px);
+    }
+
+    .menu-section .menu-list .menu-item .menu-image {
+        max-width: 200px;
+    }
+
 }