<section class="stripe stripe-introvert">
  <div class="wrap">
    <div class="stripe-introvert-text">
      <h2>{{ site.data.settings.homepage.introvert.headline }}</h2>
      {{ site.data.settings.homepage.introvert.text | markdownify }}
    </div>

    <div class="stripe-introvert-quotation">
      <blockquote class="stripe-introvert-blockquote">
        <p class="stripe-introvert-blockquote-japanese">
          {{ site.data.settings.homepage.introvert.quote.japanese }}
        </p>
      </blockquote>
      <p>{{ site.data.settings.homepage.introvert.quote.translation }}</p>
    </div>

    <div class="inline-container">
      {% for topic in site.data.introvert %}
        <h3 class="inline-container-headline">{{ topic.name }}</h3>
        <ul class="inline-container-list">
          {% for item in topic.items %}
            <li class="inline-container-item">
              <a class="inline-container-link" href="{{ item.url }}">
                {{ item.text }}
              </a>
            </li>
          {% endfor %}
        </ul>
      {% endfor %}
    </div>
  </div>
</section>
