<section
  data-component-type="CTA"
  class="effortless-section"
  data-node="effortless_bg_image"
  data-node-type="file"
  data-node-default="../assets/Effortless Background.webp"
  style="background-image: url('{{effortless_bg_image}}');"
>
  <style>
    .effortless-section {
      width: 100%;
      min-height: 100vh;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;

      display: flex;
      justify-content: center;
      align-items: flex-start;

      overflow-x: hidden;
    }

    .effortless-content {
      width: 100%;
      max-width: 1400px;
      padding-top: 96px;
      padding-left: 24px;
      padding-right: 24px;

      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 24px;
    }

    .effortless-title {
      font-family: "Rajdhani", sans-serif;
      font-weight: 900;
      font-style: italic;
      font-size: 64px;
      line-height: 100%;
      color: #000000;
    }

    .effortless-desc {
      font-family: "Michroma", sans-serif;
      font-size: 20px;
      color: #000000;
      max-width: 760px;
    }

    .effortless-btn {
      width: 350px;
      height: 64px;
      padding: 18px 24px;
      border-radius: 12px;
      border: 1px solid #000000;
      background: transparent;

      font-family: "Michroma", sans-serif;
      font-size: 20px;
      line-height: 100%;
      color: #000000;

      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-top: 8px;
    }

    @media (max-width: 1024px) {
      .effortless-title {
        font-size: 48px;
      }
    }

    @media (max-width: 768px) {
      .effortless-content {
        padding-top: 72px;
      }

      .effortless-title {
        font-size: 36px;
      }

      .effortless-desc {
        font-size: 16px;
      }

      .effortless-btn {
        width: 100%;
        max-width: 320px;
        font-size: 16px;
      }
    }
  </style>

  <div class="effortless-content">
    <h2
      class="effortless-title"
      data-node="effortless_title"
      data-node-type="text"
      data-node-default="For days you wanna look ‘effortless’"
    >
      {{effortless_title}}
    </h2>

    <p
      class="effortless-desc"
      data-node="effortless_desc"
      data-node-type="text"
      data-node-default="No overthinking, no styling stress. grab a fit, hit the streets, let the outfit talk."
    >
      {{effortless_desc}}
    </p>

    <a
      href="{{effortless_btn_link}}"
      class="effortless-btn"
      data-node="effortless_btn_link"
      data-node-type="page_links"
      data-node-default="/collections"
    >
      <span data-node="effortless_btn_text" data-node-type="text" data-node-default="Shop Street Essentials">
        {{effortless_btn_text}}
      </span>
    </a>
  </div>
</section>
