.column-box {
  display: flex;
  align-items: left;
  flex-direction: column;
  gap: 40px;
  max-width: 1200px;
}

/* flex column */
.flex-box {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: 4px;
}
.flex-box p, .flex-box h3 {text-align: center;}

/* flex row but only for pc, on mobile device it is a column too */
.inline-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 120px;
}
.inline-box.diagrams {
  gap: 0px;
}

@media screen and (max-width: 900px) {
  .inline-box {
    flex-direction: column;
    align-items: center;
    gap: 60px;
  }
  .inline-box.diagrams {
    gap: 60px;
  }
}

/* like a gap-container */
.h-spacer {
  height: 40px;
}

/* where the hell do I use this, but I rather do not delete it ig */
.inline-div {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.inline-div svg {
  margin-bottom: 4px;
}