two columns layout

projects.html

@@ -28,7 +28,7 @@
         </div>
     </div>
     <div class="fullpage">
-        <div class="section">
+        <div class="section projects">
             <a class="project-container" href="postnet.html">
                 <img src="./images/postnet/postnet-cover.png" alt="" srcset="">
                 <div class="project-title">
@@ -37,8 +37,6 @@
                 <div class="project-text">геоинформационная AutoML система для контроля и развития сети
                     Московский постамат</div>
             </a>
-        </div>
-        <div class="section">
             <a class="project-container" href="emergency.html">
                 <img src="./images/emergency/cover.png" alt="" srcset="">
                 <div class="project-title">
@@ -49,7 +47,7 @@
                     ситуаций на объектах теплоснабжения</div>
             </a>
         </div>
-        <div class="section">
+        <div class="section projects">
             <a class="project-container" href="city-modelling.html">
                 <img src="./images/city/city-cover.png" alt="" srcset="">
                 <div class="project-title">

style.css

@@ -399,22 +399,33 @@ html {
   padding-bottom: 60px;
 }
 
+.section.projects>div {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  margin-top: 20px;
+}
+
 
 .project-container {
   display: block;
   position: relative;
-  width: 100%;
+  width: 40%;
   height: auto;
   cursor: pointer;
   overflow: hidden;
   text-decoration: none;
+
+  @media (max-width: 850px) {
+    width: 100%;
+  }
 }
 
 .project-container img {
   object-fit: cover;
   max-width: 1200px;
   min-height: 300px;
-  max-height: 60vh;
+  max-height: 50vh;
 }
 
 /* .project-container:hover img {