html, body {
        box-sizing: border-box;
        height: 100%;
        padding: 0;
        margin: 0;
    }
    .wrapper {
        box-sizing: border-box;
        min-height: 100%;
        display: flex;
        flex-direction: column;
    }
    .page-header, .page-footer {
        flex-grow: 0;
        flex-shrink: 0;
    }
    .page-body {
        flex-grow: 1;
    }
    .intro {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 520px;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), url("https://images.unsplash.com/photo-1587620962725-abab7fe55159?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1031&q=80");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    .intro h1 {
      font-family: sans-serif;
      font-size: 60px;
      color: #fff;
      font-weight: bold;
      text-transform: uppercase;
      margin: 0;
    }