.grit-qr-code {
  display: inline-block;
  font-family: var(--grit-qr-code-font-family);
  color: var(--grit-qr-code-color);
}
.grit-qr-code__element {
  padding: var(--grit-qr-code-element-padding);
}
.grit-qr-code__element a:focus {
  outline: none;
}
.grit-qr-code__element a:focus-visible {
  outline: 1px solid var(--blue500);
}
.grit-qr-code__element a:hover {
  cursor: default;
}
.grit-qr-code__title {
  font-size: var(--grit-qr-code-title-font-size);
  line-height: var(--grit-qr-code-title-line-height);
  letter-spacing: var(--grit-qr-code-title-letter-spacing);
  margin-left: var(--grit-qr-code-title-margin-left);
  margin-top: var(--grit-qr-code-title-margin-top);
}
.grit-qr-code__tutorial {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.grit-qr-code__tutorial__title {
  font-weight: bold;
  font-size: var(--grit-qr-code-tutorial-title-front-size);
  line-height: var(--grit-qr-code-tutorial-title-height);
  letter-spacing: var(--grit-qr-code-tutorial-title-letter-spacing);
}
.grit-qr-code__tutorial__steps {
  display: flex;
  justify-content: center;
  padding-top: var(--grit-qr-code-tutorial-steps-padding-top);
  padding-bottom: var(--grit-qr-code-tutorial-steps-padding-bottom);
}
.grit-qr-code__tutorial__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.grit-qr-code__tutorial__step img {
  height: var(--grit-qr-code-tutorial-step-img-height);
  width: var(--grit-qr-code-tutorial-step-img-width);
}
.grit-qr-code__tutorial__step p {
  font-size: var(--grit-qr-code-tutorial-step-p-font-size);
  line-height: var(--grit-qr-code-tutorial-step-p-line-height);
  letter-spacing: var(--grit-qr-code-tutorial-step-p-letter-spacing);
  margin-top: var(--grit-qr-code-tutorial-step-p-margin-top);
  margin-bottom: var(--grit-qr-code-tutorial-step-p-margin-bottom);
  width: var(--grit-qr-code-tutorial-step-p-width);
  height: var(--grit-qr-code-tutorial-step-p-height);
}