<div class="subscription-confirmation">
    <h1>{{ page.title }}</h1>
  <div class="page-width">
  <div class="subscription-inner">
        <div class="subscription-content">
        {{ section.settings.content }}
        </div>
        {% if section.settings.image != blank %}
            <div class="subscription-image">
                <img src="{{ section.settings.image | img_url: '2000x' }}" alt="Subscription Confirmation" width="" height="">
            </div>
        {% endif %}
    </div>
  </div>
</div>

<style>
    .subscription-confirmation h1{
        font-size: calc(var(--font-heading-scale) * 2.6rem);
    }
    .subscription-confirmation {
        padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
        padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
      }
    
      
    .subscription-inner{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 40px;
            }
        .subscription-confirmation {
        padding: 40px 20px;
        }

        .subscription-confirmation .subscription-content {
        max-width: 600px;
        margin: 0 auto;
        }
        .subscription-content a{
            color:#000;
            font-weight:bold;
        }
        @media screen and (min-width: 750px) {
            .subscription-confirmation h1{
                font-size: calc(var(--font-heading-scale) * 3.6rem);
                text-align:center;
            }
            .subscription-confirmation {
              padding-top: {{ section.settings.padding_top }}px;
              padding-bottom: {{ section.settings.padding_bottom }}px;
            }
          }
</style>
{% schema %}
{
  "name": "subscription-confirmation",
  "settings": [
    {
      "type": "richtext",
      "id": "content",
      "label": "Content",
      "default": "<p>Thank you for subscribing! Your confirmation message goes here.</p>"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image"
    },
    {
        "type": "range",
        "id": "padding_top",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "t:sections.all.padding.padding_top",
        "default": 36
      },
      {
        "type": "range",
        "id": "padding_bottom",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "t:sections.all.padding.padding_bottom",
        "default": 36
      }
  ]
}
{% endschema %}