<div class="row margin-tb-xxl">
  <header class="column sm-10 offset-sm-1 md-6 offset-md-3">

    <h1 class="header-brand margin-0 margin-l-s">lyt</h1>
  </header>
</div>
<div class="row">
  <main class="column sm-10 offset-sm-1 md-6 offset-md-3">
    <section>
      <h1 class="section-title margin-t-m margin-b-m">Flex Grid</h1>
      <hr>

      <div class="row gap">
        <div class="column sm-1 box">
          <p class="margin-xl"></p>
        </div>
        <div class="column sm-11 box">
          <p class="margin-xl"></p>
        </div>
        <div class="column sm-2 box">
          <p class="margin-xl"></p>
        </div>
        <div class="column sm-10 box">
          <p class="margin-xl"></p>
        </div>
        <div class="column sm-3 box">
          <p class="margin-xl"></p>
        </div>
        <div class="column sm-9 box">
          <p class="margin-xl"></p>
        </div>
        <div class="column sm-4 box">
          <p class="margin-xl"></p>
        </div>
        <div class="column sm-8 box">
          <p class="margin-xl"></p>
        </div>
        <div class="column sm-5 box">
          <p class="margin-xl"></p>
        </div>
        <div class="column sm-7 box">
          <p class="margin-xl"></p>
        </div>
        <div class="column sm-6 box">
          <p class="margin-xl"></p>
        </div>
        <div class="column sm-6 box">
          <p class="margin-xl"></p>
        </div>
        <div class="column sm-7 box">
          <p class="margin-xl"></p>
        </div>
        <div class="column sm-5 box">
          <p class="margin-xl"></p>
        </div>
        <div class="column sm-8 box">
          <p class="margin-xl"></p>
        </div>
        <div class="column sm-4 box">
          <p class="margin-xl"></p>
        </div>
        <div class="column sm-9 box">
          <p class="margin-xl"></p>
        </div>
        <div class="column sm-3 box">
          <p class="margin-xl"></p>
        </div>
        <div class="column sm-10 box">
          <p class="margin-xl"></p>
        </div>
        <div class="column sm-2 box">
          <p class="margin-xl"></p>
        </div>
        <div class="column sm-11 box">
          <p class="margin-xl"></p>
        </div>
        <div class="column sm-1 box">
          <p class="margin-xl"></p>
        </div>
      </div>
    </section>
  </main>
</div>

body {
  margin: 0;
  font-family: "Lato", sans-serif;
  background-color: #fff7f7;
  color: #204969;
}

header {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-logo {
  height: 50px;
  display: block;
}

.header-brand {
  font-size: 2.5rem;
  font-weight: 900;
}

.box {
  margin: 5px 0;
  background-color: #204969;
  border-radius: 5px;
}