1 files changed, 107 insertions, 12 deletions

diff --git a/static/style.css b/static/style.css
index 1dc0bc2..c08277e 100644
--- a/static/style.css
+++ b/static/style.css
@@ -5,8 +5,12 @@ body {
   color: #352a2e;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 .container {
-  max-width: 76rem;
+  max-width: 82.5rem;
   margin: 0 auto;
 }
 
@@ -31,10 +35,18 @@ body {
   margin-bottom: 2rem;
 }
 
+.menu-mobile {
+  display: none;
+}
+
 .menu a {
   color: blue;
 }
 
+.menu a.active {
+  text-decoration: none;
+}
+
 .list {
   display: flex;
   flex-wrap: wrap;
@@ -53,8 +65,8 @@ body {
   margin-top: 0;
 }
 
-.tile img {
-  width: 100%;
+.tile .img {
+  width: 12.5rem;
   height: 12.5rem;
   object-fit: cover;
   object-position: center;
@@ -65,24 +77,25 @@ body {
   margin-bottom: 0.25rem;
 }
 
-.paginator-numbers {
-  width: 100%;
-}
-
-.paginator-numbers a {
-  text-decoration: none;
-}
-
 .paginator {
   display: flex;
   gap: 0.5rem;
   flex-wrap: wrap;
+  max-width: 50rem;
 }
 
 .paginator a {
   color: blue;
 }
 
+.paginator-numbers {
+  width: 100%;
+}
+
+.paginator-numbers a {
+  text-decoration: none;
+}
+
 .paginator-active {
   font-weight: bold;
   text-decoration: none;
@@ -118,7 +131,7 @@ body {
 
 .form-price input {
   flex: 1;
-  max-width: calc(50% - 1rem);
+  max-width: calc(50% - 0.5rem);
 }
 
 .form-price-per input {
@@ -139,3 +152,85 @@ body {
   width: auto;
   object-fit: contain;
 }
+
+.description {
+  max-width: 50rem;
+  margin-bottom: 2rem;
+}
+
+@media screen and (max-width: 44.9rem) {
+  body {
+    margin: 2rem;
+  }
+
+  .menu {
+    display: none;
+  }
+
+  .menu-mobile {
+    display: flex;
+  }
+
+  .content {
+    flex-direction: column;
+  }
+
+  .aside {
+    width: 100%;
+  }
+
+  .logo {
+    display: block;
+    box-sizing: border-box;
+    background: url("/static/logo-hor.svg") no-repeat;
+    background-position: left center;
+    background-size: contain;
+    width: 100%;
+    height: 8rem;
+    padding-left: calc(100vw - 4rem);
+  }
+
+  .tile {
+    width: calc(50% - 1rem);
+  }
+
+  .tile .img {
+    height: 12.5rem;
+  }
+
+  button,
+  select,
+  input {
+    padding: 0 0.5rem;
+    height: 2rem;
+  }
+
+  .aside .paginator {
+    display: none;
+  }
+
+  .paginator-numbers {
+    font-size: 1.25rem;
+  }
+
+  .form {
+    margin-bottom: 0;
+  }
+
+  h1 {
+    margin-top: 0;
+  }
+
+  .form-price-per {
+    position: relative;
+  }
+
+  .form-price-per label {
+    position: absolute;
+    top: 0;
+    padding: 0.5rem 2rem;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}