Grid layout, instructions (placeholder)

src/styles/App.scss

@@ -0,0 +1,70 @@
+@use "shared" as *;
+
+.layout {
+  display: grid;
+  grid-template-areas:
+    "main qr"
+    "main instructions";
+  grid-template-columns: auto 25%;
+  grid-template-rows: auto auto;
+  grid-gap: 25px;
+
+  margin: 25px;
+}
+
+.chart-container {
+  @include rounded;
+  @include shadow;
+
+  grid-area: main;
+  display: flex;
+  flex-direction: column;
+  padding: 50px;
+  gap: 50px;
+
+  background-color: $bg-grey;
+}
+
+.charts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 25px;
+}
+
+.question-group {
+  @include rounded;
+  @include shadow;
+
+  background-color: #ffffff;
+  border-radius: 4px;
+  padding: 16px;
+
+  flex: 1 1 300px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 8px;
+}
+
+.question-group svg {
+  align-self: center;
+  margin-bottom: 16px;
+}
+
+.question-group p {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.4;
+}
+
+.question-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+}
+
+.question-title .material-icons {
+  vertical-align: top;
+  margin-right: 1ex;
+}