Why is my custom text not displaying in my liquid section?

Store Design
, , ,
1

Hello! I made a custom liquid section and designed a custom image with text section.

I want to make the text heading and paragraph editable so I added it to my sections and added schema to make it editable in the shopify admin.

Now the text is not showing up at all in the section.

Here is the section:

{% schema %}
{
  "name": "Custom Image and Text Section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Title Text",
      "default": "Product Title"
    },
    {
      "type": "textarea",
      "id": "text",
      "label": "Description Text",
      "default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
    }
  ],
  "presets": [
    {
      "name": "Custom Image and Text",
      "category": "Custom"
    }
  ]
}
{% endschema %}

<div style="display: flex; flex-wrap: wrap; justify-content: center; padding: 0 20px; align-items: center;">
  <div style="flex: 0 0 538px; margin-right: 20px;">
    <img src="{{ 'productimage1.jpeg' | asset_url }}" alt="Product Image" style="width: 538px; height: 538px; border-radius: 10px;">
  </div>
  <div style="flex: 1; max-width: 538px;">
    <h1 style="text-align: center;">{{ settings.title }}</h1>
    <p style="text-align: center; max-width: 538px; margin: 0 auto;">{{ settings.text }}</p>
  </div>
</div>
<style>
@media only screen and (max-width: 768px) {
  div {
    width: 90%;
    margin: 0 auto;
    box-sizing: border-box;
  }
  h1, p {
    text-align: center;
  }
  img {
    width: 100%;
    height: auto;
  }
}
</style>

Here is how I want it to look, and this is how I currently have it working on the custom liquid section:

https://gyazo.com/21126794ad7cef038446553f8ddf42c6