<style scoped>
div.section-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 250px;
  background-color: black;
  background-image: url('/images/templates/colorflattered/splashes/pgc/bg.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
}

div.section-banner main {
  font-size: 3rem;
  font-weight: bold;

  color: white;
  text-shadow: 4px 4px 4px black;

  background-color: #83224F;
  padding: 0.25rem 0.75rem;
  margin-bottom: 1rem;
  border-radius: 5px;
  box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.5);
}

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

div.section-banner footer {
  display: flex;
}

div.section-banner footer section {
  width: 25%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
}

div.section-banner footer section .icon {
  color: white;
  font-size: 50px;
  text-shadow: 2px 1px 1px black;

  filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
  -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));

  transition: 0.125s;
}

div.section-banner footer section .icon:hover {
  color: #83224F;
}

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

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

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

  div.section-banner main {
    font-size: 2rem !important;
  }

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

<div class="section-banner omnibar-padding padding-0px">
  <main>
    <a href="#">
      Section Name Here
    </a>
  </main>

  <footer>
    <section>
      <a href="#"><i class="icon fa fa-sticky-note-o" title="Link 1 title"></i></a>
    </section>
    <section>
      <a href="#"><i class="icon fa fa-podcast" title="Link 2 title"></i></a>
    </section>
    <section>
      <a href="#"><i class="icon fa fa-qrcode" title="Link 3 title"></i></a>
    </section>
    <section>
      <a href="#"><i class="icon fa fa-commenting" title="Link 4 title"></i></a>
    </section>
  </footer>
</div>