style: size pieces and fen and pgn importer

src/app/pages/game/game.component.css

@@ -45,6 +45,21 @@ h2 {
   flex: 0 0 auto;
 }
 
+.content-layout {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(220px, 0.95fr) minmax(0, 2.4fr) minmax(220px, 0.95fr);
+  gap: 0.75rem;
+}
+
+.center-column {
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
 .move-form {
   display: flex;
   flex-wrap: wrap;
@@ -59,7 +74,7 @@ h2 {
 
 .board-section {
   flex: 1 1 auto;
-  min-height: 0;
+  min-height: 180px;
   display: grid;
   place-items: center;
   container-type: size;
@@ -70,6 +85,22 @@ h2 {
   overflow: hidden;
 }
 
+.import-card {
+  background: #E1EAA9;
+  border: 2px solid #5A2C28;
+  border-radius: 10px;
+  padding: 0.65rem;
+  display: grid;
+  align-self: start;
+  align-content: start;
+  gap: 0.5rem;
+}
+
+.import-card label {
+  color: #5A2C28;
+  font-weight: 700;
+}
+
 input {
   border: 2px solid #5A2C28;
   border-radius: 10px;
@@ -78,6 +109,15 @@ input {
   min-width: 180px;
 }
 
+textarea {
+  border: 2px solid #5A2C28;
+  border-radius: 10px;
+  background: #B9DAD1;
+  padding: 0.6rem 0.75rem;
+  resize: vertical;
+  min-height: 80px;
+}
+
 button {
   border: 2px solid #5A2C28;
   border-radius: 10px;
@@ -97,3 +137,25 @@ button:hover {
   color: #5A2C28;
   font-weight: 700;
 }
+
+@media (max-width: 920px) {
+  .content-layout {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "center"
+      "fen"
+      "pgn";
+  }
+
+  .center-column {
+    grid-area: center;
+  }
+
+  .fen-card {
+    grid-area: fen;
+  }
+
+  .pgn-card {
+    grid-area: pgn;
+  }
+}