<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-lg modal-dialog-scrollable modal-fullscreen-sm-down">
      <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="cdj-detail" data-controller="image-preview">
  <h2 class="cdj-heading h4 text-center mt-2 mb-3 px-4">Gorgeous Yellow Gold Men&#39;s Ring</h2>

  <img class="cdj-detail-main img-fluid d-block mx-auto rounded" alt="Custom design Gorgeous Yellow Gold Men&#39;s Ring" data-image-preview-target="main" src="https://s3.amazonaws.com/25k_assets/p/custom-jewelry-gallery/image_1/26/large_DSC_8916.jpg" />

    <div class="d-flex justify-content-center gap-2 mt-3">
        <img class="cdj-detail-thumb rounded border" alt="Alternate view of Gorgeous Yellow Gold Men&#39;s Ring" role="button" tabindex="0" data-src="https://s3.amazonaws.com/25k_assets/p/custom-jewelry-gallery/image_1/26/large_DSC_8916.jpg" data-action="click-&gt;image-preview#show" src="https://s3.amazonaws.com/25k_assets/p/custom-jewelry-gallery/image_1/26/small_DSC_8916.jpg" />
        <img class="cdj-detail-thumb rounded border" alt="Alternate view of Gorgeous Yellow Gold Men&#39;s Ring" role="button" tabindex="0" data-src="https://s3.amazonaws.com/25k_assets/p/custom-jewelry-gallery/image_2/26/large_DSC_8917.jpg" data-action="click-&gt;image-preview#show" src="https://s3.amazonaws.com/25k_assets/p/custom-jewelry-gallery/image_2/26/small_DSC_8917.jpg" />
        <img class="cdj-detail-thumb rounded border" alt="Alternate view of Gorgeous Yellow Gold Men&#39;s Ring" role="button" tabindex="0" data-src="https://s3.amazonaws.com/25k_assets/p/custom-jewelry-gallery/cad_image_1/26/large_Nevy_114_Po_17693_render_1__1_.jpg" data-action="click-&gt;image-preview#show" src="https://s3.amazonaws.com/25k_assets/p/custom-jewelry-gallery/cad_image_1/26/small_Nevy_114_Po_17693_render_1__1_.jpg" />
    </div>

    <div class="text-muted pt-3 px-1 px-md-4 pb-2">
      <p>This all-fire men's ring was requested based on one of our styles. A gentleman challenged us with building our men's ring style in much larger scale and without loosing its design. The real challenge in this project was not building a men's ring with much larger diamonds, but making it very comfortable to wear. We believe we succeeded creating the design exactly as its meant to be. This commanding beauty is set with four 4x3mm FG VS baguettes and fourteen 3mm G VS round diamonds, with 2.28ct. tw. </p>
    </div>
</div>

<style>
.cdj-detail-main {
  max-height: 400px;
}
.cdj-detail-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  cursor: pointer;
}
.cdj-detail-thumb:hover,
.cdj-detail-thumb:focus-visible {
  border-color: var(--bs-dark) !important;
}
</style>


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