first commit

public/scss/component/_zoom.scss

@@ -0,0 +1,80 @@
+@use "../abstracts/index" as *;
+
+.tf-zoom-main {
+    position: sticky;
+    top: 30px;
+    z-index: 50;
+    .drift-zoom-pane {
+        top: 0;
+        left: 0;
+        height: 520px;
+        max-width: 520px;
+        width: 100%;
+        background: #fff;
+        -webkit-transform: translate3d(0, 0, 0);
+        box-shadow: 0 1px 5px #7f7f7f05, 0 5px 18px #7f7f7f33;
+        z-index: 3;
+    }
+}
+
+.drift-bounding-box.drift-open {
+    background: #ffffff40;
+    box-shadow: 0 0 0 1px #0006 inset;
+    z-index: 5000;
+}
+
+.drift-zoom-pane {
+    z-index: 5000;
+}
+
+.section-image-zoom {
+    .other-image-zoom {
+        @include transition3;
+    }
+    &.zoom-active .other-image-zoom {
+        opacity: 0.3;
+    }
+}
+
+.pswp__bg {
+    background: var(--White);
+}
+
+.pswp__icn {
+    fill: rgb(34, 34, 34);
+    color: var(--White);
+    .pswp__icn-shadow {
+        stroke: var(--White);
+        stroke-width: 1px;
+        fill: none;
+    }
+}
+
+.pswp__counter {
+    color: #222;
+    text-shadow: 1px 1px 3px #ffffff;
+}
+
+.tf-model-viewer {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    model-viewer {
+        display: block;
+        position: relative;
+        z-index: 5;
+        width: 100%;
+        height: 100%;
+        &.disabled {
+            pointer-events: none;
+        }
+    }
+    &.active {
+        model-viewer {
+            pointer-events: all;
+        }
+        .wrap-btn-viewer {
+            display: none;
+        }
+    }
+}