.content {
  margin: 0 auto;
  max-width: 1400px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

.content > form {
  flex: 0.5;
  max-width: clamp(340px, 50%, 500px);
}

.content > form > .title {
  margin: 1em auto;
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
}

.inputBox,
.footerBox {
  margin-bottom: 1em;
  height: 80px;
  display: grid;
  grid-template-areas: 'blank blank label' 'tip main main';
  grid-template-columns: 50px 15px calc(100% - 65px);
  align-items: center;
  justify-content: center;
}

.inputBox > label {
  grid-area: label;
  color: var(--clr--border);
  text-align: left;
  font-size: 0.75em;
}

.inputBox > .tip {
  grid-area: tip;
  width: 28px;
  height: 28px;
  justify-self: center;
}

.icon-user {
  background-image: url(../../img/system/svg-www/tip1.svg);
}

.icon-email {
  background-image: url(../../img/system/svg-www/tip2.svg);
}

.icon-lock {
  background-image: url(../../img/system/svg-www/tip3.svg);
}

.inputBox > input {
  grid-area: main;
}

.errorBox {
  grid-area: label;
  text-align: center;
  color: red;
  font-size: 0.75em;
}

.footerBox > button {
  grid-area: main;
  width: 100%;
}