<style>
    .restrictions-section{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 40px;
    }
    .restrictions-main {
        padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
        padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
      }
    .restrictions-button a{
        background: rgb(15, 80, 40);
        border-radius: 6px;
        border-style: none;
        border-color: rgb(29, 29, 29);
        border-width: 2px;
        color: rgb(255, 255, 255);
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 0px;
        font-style: normal;
        white-space: normal;
        padding: 0px 15px;
        text-align: center;
        word-break: break-word;
        align-self: flex-end;
        cursor: pointer;
        pointer-events: auto;
        height: 54px;
        display: inline-block;
        line-height: 54px;
        text-decoration: none;
    }
    .restrictions-main h1{
        font-size: calc(var(--font-heading-scale) * 2.6rem);
        text-align: center;
        margin-bottom:40px;
    }
      @media screen and (min-width: 750px) {
        .restrictions-section h1{
            font-size: calc(var(--font-heading-scale) * 3.6rem);
            text-align: center;
        }
        .restrictions-main {
          padding-top: {{ section.settings.padding_top }}px;
          padding-bottom: {{ section.settings.padding_bottom }}px;
        }
      }
</style>
<div class="page-width restrictions-main">
    <h1>{{ page.title }}</h1>
    <div class="restrictions-section">
        <div class="content-inner-wrap">
            {% if section.settings.content != blank %}
                <div class="restrictions-content">
                {{ section.settings.content }}
                </div>
            {% endif %}

            {% if section.settings.button_label != blank and section.settings.button_link != blank %}
                <div class="restrictions-button">
                <a href="{{ section.settings.button_link }}" class="btn">
                    {{ section.settings.button_label }}
                </a>
                </div>
            {% endif %}
        </div>
    {% if section.settings.image != blank %}
        <div class="restrictions-image">
        <img src="{{ section.settings.image | img_url: '800x' }}" alt="Restriction Image">
        </div>
    {% endif %}
    </div>
</div>
{% schema %}
{
  "name": "Restrictions Section",
  "settings": [
    {
        "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
      },
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image"
    },
    {
      "type": "richtext",
      "id": "content",
      "label": "Content"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button label"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button link"
    }
  ],
  "presets": [
    {
      "name": "Restrictions Section"
    }
  ]
}
{% endschema %}

