TRI-283: вёрстка лендинга

static/css/moover/chatterbox.css

@@ -0,0 +1,90 @@
+.chatterbox {
+
+}
+
+.chatterbox .title {
+  margin-bottom: 60px;
+}
+
+.chatterbox__slider {
+  /*max-width: 977px;*/
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.slick-slide {
+  /*padding: 50px;*/
+}
+
+
+.chatterbox__slide {
+  width: 335px;
+  height: 615px;
+  background: url("/static/img/webp/phone-border.webp") center no-repeat;
+  transition: scale 0.2s ease-in-out;
+  margin: auto;
+  position: relative;
+}
+
+.slick-slide:not(.slick-center) .chatterbox__slide {
+  scale: 0.72;
+}
+
+.slick-center .chatterbox__vicon {
+  opacity: 1;
+}
+
+
+.chatterbox__vicon {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.chatterbox__vicon::before {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-primary);
+  border: 0;
+  border-radius: 50%;
+  transition: opacity 100ms linear;
+  
+}
+
+.chatterbox__vicon::before {
+  width: 80px;
+  height: 80px;
+}
+
+.chatterbox__vicon::before, .chatterbox__vicon::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  cursor: pointer;
+}
+
+.chatterbox__vicon::after {
+  border-color: transparent transparent transparent #ffffff;
+  border-style: solid;
+  border-width: 15px 0 15px 25px;
+  display: inline-block;
+  margin-left: 2px;
+}
+
+.chatterbox .slick-next {
+  right: -40px;
+}
+
+.chatterbox .slick-prev {
+  left: -40px;
+}
+