уменьшение отступов и карточки в 2 ряда в компактном режиме

index.html

@@ -94,7 +94,7 @@
           </button>
         </div>
 
-        <div class="control-group">
+        <div class="control-group view-group">
           <span>Вид</span>
           <button class="segmented is-active" type="button" data-view="cards">
             Плитки

styles.css

@@ -104,12 +104,12 @@ a {
 .shell {
   width: min(1320px, calc(100% - 32px));
   margin: 0 auto;
-  padding: 28px 0;
+  padding: 20px 0;
 }
 
 .hero {
   display: block;
-  margin-bottom: 18px;
+  margin-bottom: 12px;
 }
 
 .hero-content,
@@ -123,13 +123,13 @@ a {
 }
 
 .hero-content {
-  min-height: 210px;
+  min-height: 190px;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  gap: 10px;
+  gap: 8px;
-  padding: clamp(18px, 3vw, 28px);
+  padding: clamp(16px, 2.6vw, 24px);
-  border-radius: 26px;
+  border-radius: 22px;
   position: relative;
   overflow: visible;
 }
@@ -193,8 +193,8 @@ html:not([data-show-numbers="true"]) .item-number {
   max-height: calc(100vh - 48px);
   overflow: auto;
   display: grid;
-  gap: 14px;
+  gap: 10px;
-  padding: 18px;
+  padding: 14px;
   border-radius: 24px;
   opacity: 0;
   visibility: hidden;
@@ -244,10 +244,10 @@ html:not([data-show-numbers="true"]) .item-number {
 .settings-button {
   position: absolute;
   z-index: 21;
-  top: 20px;
+  top: 16px;
-  right: 20px;
+  right: 16px;
-  width: 40px;
+  width: 38px;
-  height: 40px;
+  height: 38px;
   display: grid;
   place-items: center;
   border-radius: 999px;
@@ -298,13 +298,13 @@ html:not([data-show-numbers="true"]) .item-number {
 
 .search-field input {
   width: 100%;
-  min-height: 42px;
+  min-height: 38px;
   border: 1px solid var(--border);
   border-radius: 14px;
   background: var(--surface);
   color: var(--text);
   outline: none;
-  padding: 0 16px;
+  padding: 0 12px;
   transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
 }
 
@@ -377,9 +377,9 @@ html:not([data-show-numbers="true"]) .item-number {
 .control-group {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
-  min-height: 48px;
+  min-height: 42px;
-  padding: 8px;
+  padding: 6px;
   border: 1px solid var(--border);
   border-radius: 18px;
   background: var(--surface);
@@ -390,6 +390,18 @@ html:not([data-show-numbers="true"]) .item-number {
   padding-left: 6px;
 }
 
+.view-group {
+  flex-wrap: wrap;
+}
+
+.view-group > span {
+  width: 100%;
+}
+
+.view-group .segmented {
+  flex-basis: calc(50% - 3px);
+}
+
 .segmented,
 .accent-swatch {
   border: 0;
@@ -399,7 +411,7 @@ html:not([data-show-numbers="true"]) .item-number {
 
 .segmented {
   flex: 1;
-  min-height: 34px;
+  min-height: 31px;
   min-width: 0;
   border-radius: 12px;
   background: transparent;
@@ -423,8 +435,8 @@ html:not([data-show-numbers="true"]) .item-number {
 }
 
 .accent-swatch {
-  width: 36px;
+  width: 32px;
-  height: 36px;
+  height: 32px;
   border: 2px solid transparent;
   border-radius: 999px;
   box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.18);
@@ -487,11 +499,11 @@ html:not([data-show-numbers="true"]) .item-number {
 
 .catalog {
   display: grid;
-  gap: 18px;
+  gap: 12px;
 }
 
 .catalog-section {
-  border-radius: 32px;
+  border-radius: 24px;
   overflow: hidden;
 }
 
@@ -514,9 +526,9 @@ html:not([data-show-numbers="true"]) .item-number {
 .section-head {
   display: flex;
   justify-content: space-between;
-  gap: 18px;
+  gap: 12px;
   align-items: flex-start;
-  padding: 24px;
+  padding: 18px;
   border-bottom: 1px solid var(--border);
   background:
     radial-gradient(circle at top left, rgba(var(--accent-rgb), 0.14), transparent 22rem),
@@ -541,16 +553,16 @@ html:not([data-show-numbers="true"]) .item-number {
 }
 
 .section-head h2 {
-  margin-top: 8px;
+  margin-top: 5px;
-  font-size: clamp(1.6rem, 4vw, 2.6rem);
+  font-size: clamp(1.35rem, 3.2vw, 2.15rem);
 }
 
 .section-head p:not(.section-number),
 .group-head p:not(.group-number) {
   max-width: 760px;
-  margin: 8px 0 0;
+  margin: 5px 0 0;
   color: var(--muted);
-  line-height: 1.65;
+  line-height: 1.5;
 }
 
 .section-count {
@@ -584,13 +596,13 @@ html:not([data-show-numbers="true"]) .item-number {
 
 .section-groups {
   display: grid;
-  gap: 18px;
+  gap: 12px;
-  padding: 18px;
+  padding: 12px;
 }
 
 .catalog-group {
   border: 1px solid var(--border);
-  border-radius: 24px;
+  border-radius: 18px;
   background: rgba(255, 255, 255, 0.035);
   overflow: hidden;
 }
@@ -598,14 +610,14 @@ html:not([data-show-numbers="true"]) .item-number {
 .group-head {
   display: flex;
   justify-content: space-between;
-  gap: 16px;
+  gap: 12px;
-  padding: 18px;
+  padding: 14px;
   border-bottom: 1px solid var(--border);
 }
 
 .group-head h3 {
-  margin-top: 6px;
+  margin-top: 4px;
-  font-size: 1.22rem;
+  font-size: 1.08rem;
 }
 
 .group-count {
@@ -623,21 +635,21 @@ html:not([data-show-numbers="true"]) .item-number {
 .items-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 14px;
+  gap: 10px;
-  padding: 14px;
+  padding: 10px;
 }
 
 .nav-card {
   --tilt-x: 0deg;
   --tilt-y: 0deg;
   position: relative;
-  min-height: 224px;
+  min-height: 196px;
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 12px;
-  padding: 18px;
+  padding: 14px;
   border: 1px solid var(--border);
-  border-radius: 22px;
+  border-radius: 18px;
   background: var(--panel);
   color: var(--text);
   text-decoration: none;
@@ -681,8 +693,8 @@ html:not([data-show-numbers="true"]) .item-number {
 }
 
 .nav-card img {
-  width: 58px;
+  width: 50px;
-  height: 58px;
+  height: 50px;
   object-fit: contain;
   filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.22));
 }
@@ -690,11 +702,11 @@ html:not([data-show-numbers="true"]) .item-number {
 .card-content {
   position: relative;
   display: grid;
-  gap: 7px;
+  gap: 5px;
 }
 
 .nav-card h4 {
-  font-size: 1.08rem;
+  font-size: 1rem;
   line-height: 1.25;
 }
 
@@ -708,14 +720,14 @@ html:not([data-show-numbers="true"]) .item-number {
 .tags {
   display: flex;
   flex-wrap: wrap;
-  gap: 6px;
+  gap: 5px;
-  margin-top: 4px;
+  margin-top: 2px;
 }
 
 .tags span {
   border: 1px solid var(--border);
   border-radius: 999px;
-  padding: 4px 8px;
+  padding: 3px 7px;
   background: rgba(var(--accent-rgb), 0.1);
   color: var(--muted);
   font-size: 0.76rem;
@@ -769,11 +781,11 @@ html:not([data-show-numbers="true"]) .item-number {
 
 .catalog.list-view .nav-card,
 .catalog.compact-list-view .nav-card {
-  min-height: 112px;
+  min-height: 96px;
   display: grid;
-  grid-template-columns: 58px minmax(0, 1fr) 42px;
+  grid-template-columns: 50px minmax(0, 1fr) 36px;
   align-items: center;
-  gap: 16px;
+  gap: 12px;
 }
 
 .catalog.list-view .arrow,
@@ -787,12 +799,12 @@ html:not([data-show-numbers="true"]) .item-number {
 }
 
 .catalog.compact-list-view .items-grid {
-  grid-template-columns: 1fr;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
 .catalog.compact-cards-view .section-head,
 .catalog.compact-list-view .section-head {
-  padding: 18px 20px;
+  padding: 14px 16px;
 }
 
 .catalog.compact-cards-view .section-head p:not(.section-number),
@@ -811,7 +823,7 @@ html:not([data-show-numbers="true"]) .item-number {
 
 .catalog.compact-cards-view .group-head,
 .catalog.compact-list-view .group-head {
-  padding: 14px 16px;
+  padding: 10px 12px;
   align-items: center;
 }
 
@@ -822,9 +834,9 @@ html:not([data-show-numbers="true"]) .item-number {
 }
 
 .catalog.compact-cards-view .nav-card {
-  min-height: 132px;
+  min-height: 116px;
-  gap: 10px;
+  gap: 8px;
-  padding: 14px;
+  padding: 12px;
 }
 
 .catalog.compact-cards-view .nav-card img {
@@ -850,8 +862,8 @@ html:not([data-show-numbers="true"]) .item-number {
 }
 
 .catalog.compact-list-view .nav-card {
-  min-height: 78px;
+  min-height: 70px;
-  padding: 12px 14px;
+  padding: 10px 12px;
   grid-template-columns: 42px minmax(0, 1fr) 34px;
 }
 
@@ -899,13 +911,13 @@ html:not([data-show-numbers="true"]) .item-number {
 @media (max-width: 720px) {
   .shell {
     width: min(100% - 22px, 1320px);
-    padding: 22px 0;
+    padding: 14px 0;
   }
 
   .hero-content {
     min-height: auto;
-    padding: 22px 16px;
+    padding: 16px 14px;
-    border-radius: 24px;
+    border-radius: 20px;
   }
 
   .control-panel,
@@ -952,12 +964,16 @@ html:not([data-show-numbers="true"]) .item-number {
   }
 
   .section-groups {
-    padding: 12px;
+    padding: 8px;
   }
 
   .items-grid {
     grid-template-columns: 1fr;
-    padding: 12px;
+    padding: 8px;
+  }
+
+  .catalog.compact-list-view .items-grid {
+    grid-template-columns: 1fr;
   }
 
   .catalog.compact-cards-view .items-grid {
@@ -965,7 +981,7 @@ html:not([data-show-numbers="true"]) .item-number {
   }
 
   .nav-card {
-    min-height: 210px;
+    min-height: 180px;
   }
 
   .catalog.list-view .nav-card {