#session {
  margin: 0;
  padding: 0;

  min-height: 100vh;
  display: flex;

  align-items: center;
  justify-content: center;

  & > article {
    width: calc(100% - 4em);
    max-width: 30em;
    margin: 2em auto;
    padding: 0;

    text-align: center;

    form {
      display: block;
      margin: 1em auto 0;
      background: var(--bg-color);
    }
  }

  #hero {
    font-size: 3em;
    font-weight: 1000;
    text-transform: uppercase;
    line-height: 0.8;
    max-width: 5em;
    margin: 0 auto;
  }
}

@media screen and (min-width: 20em) {
  #session #hero { font-size: 4em }
}

@media screen and (min-width: 24em) {
  #session #hero { font-size: 5em }
}

@media screen and (min-width: 32em) {
  #session #hero { font-size: 6em }
}