Mejorada la grid

styles.css

@@ -13,41 +13,40 @@
   background-position: center;
 
   display: grid;
-  padding: 10px;
   height: 100%;
   width: 100%;
+  padding: 20px;
   overflow: scroll;
 
-  grid-template-columns: repeat(10, minmax(130px, 1fr));
-  grid-template-rows: repeat(13, 1fr);
+  grid-template-columns: 300px 1fr 600px 1fr 300px;
+  grid-template-rows: repeat(6, 1fr);
   gap: 20px;
 }
 
 #photos-box {
-  grid-row: 1 / 14;
-  grid-column: 1 / 3;
-
+  grid-row: 1 / 7;
+  grid-column: 1;
   justify-content: space-between;
 }
 
 #search-box {
-  grid-row: 2 / 4;
-  grid-column: 4 / 8;
+  grid-row: 2;
+  grid-column: 3;
 }
 
 #weather-box {
-  grid-row: 1 / 4;
-  grid-column: 9 / 11;
+  grid-row: 1 / 3;
+  grid-column: 5;
 }
 
 #custom-box {
-  grid-row: 4 / 10;
-  grid-column: 9 / 11;
+  grid-row: 3 / 5;
+  grid-column: 5;
 }
 
 #currency-box {
-  grid-row: 10 / 14;
-  grid-column: 9 / 11;
+  grid-row: 5 / 7;
+  grid-column: 5;
 }
 
 .box {
@@ -102,7 +101,7 @@
 
 .currency .select {
   padding: .6em 0;
-  width: 7ch;
+  width: 6em;
 }
 
 .currency .result {