<div class="browser-window">
  <div class="top-bar">
    <div class="circles">
      <div class="circle" id="close-circle"></div>
      <div class="circle" id="minimize-circle"></div>
      <div class="circle" id="maximize-circle"></div>
    </div>
  </div>
  <div class="content">
    <div class="row container layout--with-three-columns">
      <div class="region--content" style="padding: 20px; background-color:#4DB6AC; min-height: 400px">
        <p>Page title</p>
        <p>Main content</p>
        <p class="flat-text-header"></p>
        <p class="flat-text"></p>
        <p class="flat-text"></p>
        <p class="flat-text"></p>
        <p class="flat-text"></p>
      </div>

      <div class="region--sidebar-first" style="padding: 20px; background-color:#ec407a; min-height: 400px">
        <p>Sidebar first</p>
        <p class="flat-text small"></p>
        <p class="flat-text"></p>
        <p class="flat-text"></p>
      </div>

      <div class="region--sidebar-second" style="padding: 20px; background-color:#ffe0b2 ; min-height: 400px">
        <p>Sidebar second</p>
        <p class="flat-text small"></p>
        <p class="flat-text"></p>
        <p class="flat-text"></p>
      </div>
    </div>

  </div>
</div>