<!--
  templateType: section
  label: Grey In
  isAvailableForNewContent: true
  screenshotPath: ../images/section-previews/blank.svg
  description: "Section with white-to-grey divider transition"
-->
{% dnd_section
  background_image={
    "backgroundPosition": "BOTTOM_CENTER",
    "backgroundSize": "contain",
    "imageUrl": get_asset_url("../images/divider-layeredwave-greyin.svg")
  },
  padding={
    "top": 100,
    "bottom": 0,
    "left": 20,
    "right": 20
  }
%}
  {% dnd_row %}
    {% dnd_column width=12 %}
      {% dnd_module "greyin_content"
        path="@hubspot/rich_text",
        label="Content",
        html='<div style="text-align: center;"><h2>Your Content Here</h2><p>This section transitions from white to grey background.</p></div>'
      %}
      {% end_dnd_module %}
    {% end_dnd_column %}
  {% end_dnd_row %}
{% end_dnd_section %}
