{#def page #}
<Layout
  title={{ page.title }}
  description={{page.description }}
>
  <style>
    body {
      background-color: black;
    }
    .sc1 {
      width: 1200px;
      height: 630px;
      margin: 0;
      font-family: SF Pro Display, system-ui, sans-serif;
      color: white;
      background-image: linear-gradient(to bottom, #404faa, #0068b2);
    }
    .sc1__wrapper {
      position: absolute;
      inset: 60px 90px 90px 60px;
    }
    .sc1__wrapper > * {
      position: absolute;
      left: 0;
      max-width: 1060px;
    }
    .sc1__logo {
      top: 0;
      height: 50px;
    }
    .sc1__section {
      top: 150px;
      line-height: 1;
      font-weight: bold;
      text-transform: uppercase;
      font-size: 22px;
      width: 600px;
    }
    .sc1__title {
      top: 180px;
      line-height: 1;
      font-weight: bold;
      font-size: 68px;
    }
    .sc1__description {
      bottom: 0;
      line-height: 1.4;
      font-weight: normal;
      font-size: 22px;
    }
  </style>

  <article class="sc1">
    <div class="sc1__wrapper">
      <img class="sc1__logo" src="/static/img/jinjax-logo-w.png" />
      <h2 class="sc1__section">{{ page.section }}</h2>
      <h1 class="sc1__title">{{ page.title | utils.widont }}</h1>
      <div class="sc1__description">{{ page.description | utils.widont }}</div>
    </div>
  </article>
</Layout>