<style scoped>
  .section-banner {
    height: 300px;

    display: flex;
    flex-direction: column;


    color: white;
    background-image: url(http://i.imgur.com/zYkTQSR.jpg);
  }

  .section-banner main {
    flex-grow: 1;

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

    font-size: 3rem;
    font-family: Facit;
    font-weight: bold;
    text-shadow: 2px 2px 2px red, 4px 4px 2px green;
  }

  .section-banner main a {
    color: inherit;
  }

  .section-banner footer {
    background-color: rgba(0, 0, 0, 0.5);

    display: flex;
  }

  .section-banner footer a {
    text-transform: uppercase;
    text-shadow: 2px 2px 2px black;
    font-weight: bold;
    font-size: 1.2rem;
    color: inherit;

    padding: 0.25rem 1.75rem;
  }

  .section-banner footer .spacer {
    flex-grow: 1;
  }

  .section-banner footer .spacer + a {
    background-color: #CA13AB;
  }

  body:not(.forumdisplay) .section-banner {
    height: 200px;
  }

  body:not(.forumdisplay) .section-banner footer {
    display: none;
  }

  @media screen and (max-width: 768px) {
    .section-banner {
      height: 150px !important;
    }

    .section-banner footer {
      display: none;
    }
  }
</style>

<div class="section-banner omnibar-padding padding-0px">
  <main>
    <a href="#">
      The Duck Pond
    </a>
  </main>

  <footer>
    <a href="#">
      Link 1
    </a>

    <a href="#">
      Link 2
    </a>

    <a href="#">
      Link 3
    </a>

    <div class="spacer"></div>

    <a href="#">
      Featured Link
    </a>
  </footer>
</div>