Add payment methods screen

src/app/payment/payment.component.css

@@ -1,15 +1,23 @@
 .payment {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
     margin: 0;
     padding: 0;
     width: 100%;
-    height: 400px;
+    height: 500px;
     background-color: hsl(0, 0%, 11%);
     border-radius: 8px;
     transform: translateY(-8px);
 }
 
+.request {
+    transform: translateY(-40px);
+}
+
+.main {
+    display: grid;
+    height: 400px;
+    grid-template-columns: 1fr 1fr;
+}
+
 .qr {
     position: relative;
     transform: translateY(25%);
@@ -42,12 +50,12 @@
 }
 
 /* Data */
-.data {
+.main .data {
     display: grid;
     grid-template-columns: 1fr 50px;
     grid-template-rows: 1fr 4rem 4rem 4rem 1fr;
 }
-#target {
+.main #target {
     grid-row: 2;
 }
 #amount {
@@ -57,6 +65,65 @@
     grid-row: 4;
 }
 
-h3 {
+.main h3 {
     line-height: 0;
+}
+
+#title {
+    padding-top: 2rem;
+    line-height: 1;
+    font-size: 20pt;
+    font-weight: normal;
+    text-align: center;
+}
+
+#price {
+    text-align: center;
+    font-size: 16pt;
+}
+
+#list {
+    overflow-y: scroll;
+    scroll-behavior: smooth;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    margin: 0;
+    padding: 0;
+}
+#list::-webkit-scrollbar {
+    display: none;
+}
+
+#list li {
+    padding-top: 10px;
+    padding-left: 5%;
+    padding-right: 5%;
+    border-radius: 8px;
+    display: grid;
+    cursor: pointer;
+    grid-template-columns: 75px 1fr;
+    grid-row: 1fr;
+    list-style: none;
+    padding-bottom: 1rem;
+    transition: .3s ease;
+    line-height: 0;
+}
+#list li:hover {
+    box-shadow: 0px 0px 61px 3px rgba(0,0,0,0.3) inset;
+}
+#list li img {
+    height: 42px;
+    width: 42px;
+    margin: 0 auto;
+    padding-top: 12px;
+    grid-row-start: 1;
+    grid-row-end: 2;
+}
+#list li p {
+    grid-row: 1;
+    grid-column: 2;
+}
+#list li h4 {
+    grid-row: 2;
+    grid-column: 2;
 }