comma four works on
{vehicleCountText} car models. It adds the best ADAS in the world to your existing car.
@@ -504,7 +516,7 @@
padding: 2rem;
}
- & .four-image {
+ & .four-image-wrapper {
width: 50vw;
max-width: 1200px;
min-width: 400px;
@@ -527,6 +539,29 @@
}
}
+ & .four-image {
+ width: 100%;
+ height: auto;
+ display: block;
+ position: relative;
+ }
+
+ & .four-screen-video {
+ position: absolute;
+ /* Recalculate with: python3 -c "img_w=2548; img_h=2007; x1=353; y1=1300; x2=1712; y2=1912; left=x1/img_w*100; top=y1/img_h*100; width=(x2-x1)/img_w*100; height=(y2-y1)/img_h*100; print(f'left: {left:.1f}%'); print(f'top: {top:.1f}%'); print(f'width: {width:.1f}%'); print(f'height: {height:.1f}%')" */
+ /* Round: left/top down, width/height up */
+ left: 13.7%;
+ top: 64.6%;
+ width: 53.6%;
+ height: 30.6%;
+ object-fit: contain;
+ object-position: center;
+ z-index: 1;
+ /*opacity: 0.7;*/
+ border-radius: 2px;
+ overflow: hidden;
+ }
+
& .four-content {
position: absolute;
left: calc(100px + 50vw + 2rem);
diff --git a/static/videos/comma-four/screen-video.mp4 b/static/videos/comma-four/screen-video.mp4
new file mode 100644
index 00000000..96c6d6d8
Binary files /dev/null and b/static/videos/comma-four/screen-video.mp4 differ