<turbo-stream action="update" target="remote_modal"><template>
  <turbo-frame id="remote_modal">
  <div class="modal fade" data-controller="modal"
       data-action="turbo:submit-end->modal#submitEnd keyup@window->modal#closeWithKeyboard click@window->modal#closeBackground">
    <div class="modal-dialog modal-xl">
      <div class="modal-content rounded-0 border shadow-sm position-relative" style="border-width: 10px !important; border-color: #C0C0C0 !important;">
        <button type="button" class="btn-close btn-sm position-absolute top-0 end-0 m-2" data-bs-dismiss="modal" aria-label="Close" style="z-index: 1050;"></button>
        <div class="modal-body remote_modal_body " id="remote_modal_body">
          
    <div class="p-2">
  <div class="mb-2">
    <h2 class="display-6 fw-semibold mb-2">Measure Your Finger</h2>
    <p class="text-muted fs-5">Find My Ring Size</p>
  </div>

  <div class="card border-0 shadow-sm">
    <div class="card-body bg-light">
      <ol class="list-group list-group-numbered list-group-flush">
        <li class="list-group-item bg-transparent border-0 py-2">
          Use a piece of string or a thin strip of paper.
        </li>
        <li class="list-group-item bg-transparent border-0 py-2">
          Wrap it around the base of your finger and mark the spot with a pen where the string overlaps.
        </li>
        <li class="list-group-item bg-transparent border-0 py-2">
          Unwrap your marked string and measure it with a ruler.
        </li>
        <li class="list-group-item bg-transparent border-0 py-2">
          Finally, enter your measurement above to our <a href="/education/jewelry/ring-size-chart" class="text-decoration-underline" target="_top">ring size chart</a>
        </li>
      </ol>
    </div>
  </div>
</div>

        </div>
      </div>
    </div>
  </div>
</turbo-frame></template></turbo-stream>