/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Unexpected "{"
Line 16:3 Expected identifier but found "'section-main-page.css'"
Line 18:0 Unexpected "{"
Line 18:1 Expected identifier but found "%"
Line 20:10 Unexpected "{"
Line 20:19 Expected ":"
Line 21:14 Expected identifier but found whitespace
Line 21:16 Unexpected "{"
Line 21:25 Expected ":"
... and 33 more hidden warnings

**/
{{ 'section-main-page.css' | asset_url | stylesheet_tag }}

{%- style -%}

.section-{{ section.id }}-padding {
  padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
  padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

.about-banner-wrapper {
  margin-bottom: 0;
  line-height: 0;
}

.about-banner-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
}

.about-mobile-banner {
  display: block;
}

.about-desktop-banner {
  display: none;
}

@media screen and (min-width: 750px) {

  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top }}px;
    padding-bottom: {{ section.settings.padding_bottom }}px;
  }

  .about-mobile-banner {
    display: none;
  }

  .about-desktop-banner {
    display: block;
  }

}

{%- endstyle -%}

<div class="page-width section-{{ section.id }}-padding">

  {% if page.handle == 'about-us' %}

    <div class="about-banner-wrapper about-desktop-banner">
      <img
        src="{{ 'ndestore-image-desktop.webp' | file_url }}"
        alt="About NDEStore Desktop Banner"
        loading="lazy"
        width="1920"
        height="850"
      >
    </div>

    <div class="about-banner-wrapper about-mobile-banner">
      <img
        src="{{ 'ndestore-image-mobile.webp' | file_url }}"
        alt="About NDEStore Mobile Banner"
        loading="lazy"
        width="900"
        height="1400"
      >
    </div>

  {% endif %}

  <h1 class="main-page-title page-title h0{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
    {{ page.title | escape }}
  </h1>

  <div class="rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
    {{ page.content }}
  </div>

</div>

{% schema %}
{
  "name": "t:sections.main-page.name",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "header",
      "content": "Section Padding"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Top Padding",
      "default": 20
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Bottom Padding",
      "default": 20
    }
  ]
}
{% endschema %}