{% schema %}
{
  "name": "Irons summary",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Title"
    },
    {
      "type": "richtext",
      "id": "content",
      "label": "Content"
    }
  ],
  "presets": [
    {
      "name": "Irons summary"
    }
  ]
}
{% endschema %}

<div class="irons-summary">
  <div class="page-width">
    {% if section.settings.title != blank %}
      <h2>{{ section.settings.title }}</h2>
    {% endif %}
    <div class="irons-content">
      {{ section.settings.content }}
    </div>
  </div>
</div>

<style>
  .irons-summary {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
  }
  .irons-summary h2 {
    font-size: calc(var(--font-heading-scale) * 3.6rem);
    text-align: center;
    margin:30px 0;
    color: #1b1b1b;
  }
  .irons-content {
    line-height: 1.6;
  }
  @media (max-width:767px){
    .irons-summary h2 {
      font-size: calc(var(--font-heading-scale) * 1.6rem);
    }
  }
</style>