@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;
}