Terminada funcionalidad de fondos

styles.css

@@ -1,3 +1,7 @@
+/*
+ * BASE
+ */
+
 * {
   font-family: sans;
 }
@@ -6,24 +10,44 @@
   background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%);
   background-repeat: no-repeat;
   background-size: cover;
+  background-position: center;
 
   display: grid;
   padding: 10px;
-  height: 100vh;
+  height: 100%;
+  width: 100%;
+  overflow: scroll;
 
-  grid-template-columns: repeat(4, 1fr);
-  grid-template-rows: repeat(4, 1fr);
-  gap: 10px;
+  grid-template-columns: repeat(10, minmax(130px, 1fr));
+  grid-template-rows: repeat(13, 1fr);
+  gap: 20px;
 }
 
 #photos-box {
+  grid-row: 1 / 14;
+  grid-column: 1 / 3;
+
+  justify-content: space-between;
+}
+
+#search-box {
+  grid-row: 2 / 4;
+  grid-column: 4 / 8;
+}
+
+#weather-box {
   grid-row: 1 / 4;
-  grid-col: 1;
+  grid-column: 9 / 11;
+}
+
+#custom-box {
+  grid-row: 4 / 10;
+  grid-column: 9 / 11;
 }
 
 #currency-box {
-  grid-row: 4;
-  grid-col: 1;
+  grid-row: 10 / 14;
+  grid-column: 9 / 11;
 }
 
 .box {
@@ -35,9 +59,13 @@
   padding: 1em;
   border-radius: 4px;
 
-  box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px;
+  box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
 }
 
+/*
+ * Currency
+ */
+
 .box .currency {
   display: flex;
   flex-direction: column;
@@ -86,9 +114,14 @@
   font-size: 1.1em;
 }
 
+/*
+ * Photos
+ */
+
 .box .photos {
   overflow-y: scroll;
   overflow-x: hidden;
+  height: 100%;
 }
 
 .photos img {
@@ -96,3 +129,16 @@
   margin-bottom: 5px;
 }
 
+#photos-page {
+  display: inline-flex;
+  align-items: center;
+}
+
+.box .photos-controls {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  margin-top: 10px;
+}
+