<section class="morning-word" data-reveal>
  <div class="container">
    <div class="morning-word__inner">
      <svg class="morning-word__quote-mark" width="40" height="32" viewBox="0 0 40 32" fill="none" aria-hidden="true">
        <path d="M0 20.8C0 12.267 5.333 5.467 16 0.4l2.133 3.733C12.267 7.333 9.333 12 8.8 16h7.2v16H0V20.8zm24 0C24 12.267 29.333 5.467 40 0.4l2.133 3.733C36.267 7.333 33.333 12 32.8 16H40v16H24V20.8z" fill="currentColor" opacity="0.1"/>
      </svg>
      {%- if section.settings.quote != blank -%}
        <blockquote class="morning-word__quote">{{ section.settings.quote }}</blockquote>
      {%- endif -%}
      <div class="morning-word__attribution">
        {%- if section.settings.author != blank -%}
          <span class="morning-word__author">{{ section.settings.author }}</span>
        {%- endif -%}
        {%- if section.settings.detail != blank -%}
          <span class="morning-word__detail">{{ section.settings.detail }}</span>
        {%- endif -%}
      </div>
    </div>
  </div>
</section>

{% schema %}
{
  "name": "Morning Word",
  "class": "section-morning-word",
  "settings": [
    { "type": "textarea", "id": "quote", "label": "Quote", "default": "A truly great cup of coffee." },
    { "type": "text", "id": "author", "label": "Author", "default": "Customer" },
    { "type": "text", "id": "detail", "label": "Detail" }
  ],
  "presets": [{ "name": "Morning Word" }]
}
{% endschema %}