<style>
  .titleSection {
    min-height: 200px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
  }

  .titleSection .mainTitle {
    font-size: 36px;
  }

  .titleSection .brandBlock {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .titleSection .brandBlock .brandTitle {
    font-size: 100px;
    font-weight: bold;
    line-height: 84px;
  }

  .titleSection .socialsArea {
    display: flex;
    flex-direction: column;
    margin-top: 2mm;
  }

  .titleSection .brandBlock .socialItem {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .titleSection .brandBlock .socialItem .socialIcon {
    height: 7mm;
    margin: .2mm 1mm;
  }

  .titleSection .brandBlock .socialItem .socialName {
    font-size: 18px;
  }
</style>
<div class="titleSection">
  <h2 class="mainTitle"><%= section.content.header %></h2>
  <div class="brandBlock">
    <h1 class="brandTitle"><%= section.content.band_title %></h1>
    <div class="socialsArea">
      <% section.content.socials.forEach(social => { %>
        <div class="socialItem">
          <img class="socialIcon" src=<%= `data:image/png;base64,${resources.social_icons[social.service]}` %> />
          <p class="socialName"><%= social.tag %></p>
        </div>
      <% }) %>
    </div>
  </div>
</div>
