@import url(https://fonts.googleapis.com/css?family=Inter:regular,600,700&display=swap);



@charset "UTF-8";

@font-face {
  font-family: icomoon;
  font-display: swap;
  src: url("/assets/img/work/motwi/fonts/icomoon.woff2") format("woff2"), url("/assets/img/work/motwi/fonts/icomoon.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

[class*=_icon-]:before {
  font-family: "icomoon";
  font-style: normal;
 /* font-weight: normal; */
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class*=_icon-]:before {
  display: block;
}

._icon-arrow-triangle:before {
  content: "\e900";
}

._icon-attention:before {
  content: "\e901";
}

._icon-bike:before {
  content: "\e902";
}

._icon-clock:before {
  content: "\e903";
}

._icon-connect:before {
  content: "\e904";
}

._icon-cross:before {
  content: "\e905";
}

._icon-data:before {
  content: "\e906";
}

._icon-diagram:before {
  content: "\e907";
}

._icon-directions:before {
  content: "\e908";
}

._icon-home:before {
  content: "\e909";
}

._icon-logo:before {
  content: "\e90a";
}

._icon-path:before {
  content: "\e90b";
}

._icon-people:before {
  content: "\e90c";
}

._icon-settings:before {
  content: "\e90d";
}

._icon-web:before {
  content: "\e90e";
}

* {
  padding: 0px;
  margin: 0px;
  border: 0px;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html,
body {
  height: 100%;
  min-width: 320px;
}

body {
  color: #121212;
  line-height: 1;
  font-family: "Inter";
  font-size: 1rem;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

input,
button,
textarea {
  font-family: "Inter";
  font-size: inherit;
  line-height: inherit;
}

button {
  cursor: pointer;
  color: inherit;
  background-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

ul li {
  list-style: none;
}


h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: inherit;
  font-size: inherit;
}

.lock body {
  overflow: hidden;
  -ms-touch-action: none;
      touch-action: none;
  -ms-scroll-chaining: none;
      overscroll-behavior: none;
}

.wrapper {
  min-height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow: hidden;
}

@supports (overflow: clip) {
  .wrapper {
    overflow: clip;
  }
}

.wrapper > main {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

.wrapper > * {
  min-width: 0;
}

/*
(i) Стилі будуть застосовуватись до
всіх класів, що містять *__container
Наприклад header__container, main__container і т.п.
Сніппет (HTML): cnt
*/

[class*=__container] {
  max-width: 75rem;
  margin: 0 auto;
  padding: 0 0.9375rem;
}

[class*=-ibg] {
  position: relative;
}

[class*=-ibg] img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

[class*=-ibg--contain] img {
  -o-object-fit: contain;
     object-fit: contain;
}

.block--grey {
  background-color: #ededed;
}

.title {
  letter-spacing: -0.66px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}

.block__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.625rem;
  font-family: Roboto;
  letter-spacing: -0.26px;
  color: #c1cbce;
  font-size: 0.8125rem;
}

.block__divided {
  position: relative;
}

.block__divided::before,
.block__divided::after {
  content: "";
  width: 50%;
  height: 100%;
  top: 0;
  position: absolute;
  z-index: -1;
}

.block__divided::before {
  left: 0;
}

.block__divided::after {
  right: 0;
}

.block__divided--blue-pink::before {
  background-color: #5c49d1;
}

.block__divided--blue-pink::after {
  background-color: #fb4e6e;
}

.block__divided--blue::before {
  background-color: #00d2fb;
}

.block__divided--blue::after {
  background-color: #5c49d1;
}

.no-webp .styleguide__content .block__divided::after{
  background: url("/assets/img/work/motwi/styleguide/01.jpg") 0 0/cover no-repeat; }

.block__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.block__left {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 50%;
          flex: 0 1 50%;
}

.about__content .block__left {
  padding: 2.625rem 0.625rem;
}

.styleguide__content .block__left {
  height: 34.6875rem;
}

.styleguide__content .block__left-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.block__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.block__right {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 50%;
          flex: 0 1 50%;
}

.styleguide__content .block__right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-align: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}



.styleguide__content .block__right span {
  color: #fff;
  font-weight: 700;
  line-height: 1.40625;
}

.block__right-body {
  padding: 0.625rem 3.75rem;
}

.styleguide__content .block__right-body {
  padding-left: 0.625rem;
  padding-right: 0rem;
}

.block__divided-title:not(:last-child) {
  margin-bottom: 1.25rem;
}

.block__colors {
  padding-top: 1.25rem;
  max-width: 19.6875rem;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.25rem;
  margin-bottom: -3.125rem;
}

.block__colors img {
  max-width: 100%;
  opacity: 0;
  -webkit-transform: translate(0px, 100%);
      -ms-transform: translate(0px, 100%);
          transform: translate(0px, 100%);
}

.block__colors img:nth-child(2) {
  position: relative;
  z-index: 3;
}

._watcher-view .block__colors img {
  -webkit-transform: translate(0px, 0px);
      -ms-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
  opacity: 1;
}

._watcher-view .block__colors img:nth-child(1) {
  -webkit-transition: all 0.6s 0.8s;
  transition: all 0.6s 0.8s;
}

._watcher-view .block__colors img:nth-child(2) {
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
}

.block__color img {
  max-width: 100%;
}

.block__themes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 2.9375rem;
  color: #fff;
  font-size: 1rem;
  line-height: 1.25;
}

.block__themes p {
  text-align: center;
}

.block__themes p:not(:last-child) {
  margin-bottom: 1.875rem;
}

.block__themes img {
  max-width: 100%;
}

.block__theme-light {
  -webkit-transform: translate(-10%, 0);
      -ms-transform: translate(-10%, 0);
          transform: translate(-10%, 0);
  opacity: 0.7;
}

._watcher-view .block__theme-light {
  opacity: 1;
  -webkit-transform: translate(0px, 0px);
      -ms-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
  -webkit-transition: all 0.7s;
  transition: all 0.7s;
}

.block__theme-dark {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  -webkit-transform: translate(10%, 0);
      -ms-transform: translate(10%, 0);
          transform: translate(10%, 0);
  opacity: 0.7;
}

._watcher-view .block__theme-dark {
  opacity: 1;
  -webkit-transform: translate(0px, 0px);
      -ms-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
  -webkit-transition: all 0.7s;
  transition: all 0.7s;
}

.block__icons {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[4];
  grid-template-columns: repeat(4, 1fr);
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-column-gap: 1.25rem;
     -moz-column-gap: 1.25rem;
          column-gap: 1.25rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.block__icon {
  text-align: center;
  -webkit-transform: scale(2);
      -ms-transform: scale(2);
          transform: scale(2);
  -webkit-filter: blur(4px);
          filter: blur(4px);
  opacity: 0;
}

.block__icon::before {
  font-size: 2.9375rem;
  color: rgba(255, 255, 255, 0.46);
}

._watcher-view .block__icon {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-filter: blur(0px);
          filter: blur(0px);
  opacity: 1;
  -webkit-transition: all 0.7s cubic-bezier(0.47, 0, 0.745, 0.715);
  transition: all 0.7s cubic-bezier(0.47, 0, 0.745, 0.715);
}

._watcher-view .block__icon:nth-child(2) {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}

._watcher-view .block__icon:nth-child(3) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

._watcher-view .block__icon:nth-child(4) {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}

._watcher-view .block__icon:nth-child(5) {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}

._watcher-view .block__icon:nth-child(6) {
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}

._watcher-view .block__icon:nth-child(7) {
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}

._watcher-view .block__icon:nth-child(8) {
  -webkit-transition-delay: 0.7s;
          transition-delay: 0.7s;
}

._watcher-view .block__icon:nth-child(9) {
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}

._watcher-view .block__icon:nth-child(10) {
  -webkit-transition-delay: 0.9s;
          transition-delay: 0.9s;
}

._watcher-view .block__icon:nth-child(11) {
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}

._watcher-view .block__icon:nth-child(12) {
  -webkit-transition-delay: 1.1s;
          transition-delay: 1.1s;
}

.block__logo::before {
  color: #fff;
}

.item-block {
  background-color: #fff;
  width: 16.875rem;
  padding: 1.375rem;
  border-radius: 1.25rem;
  border: 1px solid #eaedf3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.75rem;
}

.item-block__media {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
}

.item-block--green .item-block__media {
  background-color: rgba(132, 200, 100, 0.11);
}

.item-block--pink .item-block__media {
  background-color: rgba(246, 110, 120, 0.11);
}

.item-block--orange .item-block__media {
  background-color: rgba(255, 182, 92, 0.11);
}

.item-block--grey .item-block__media {
  background-color: rgba(193, 203, 206, 0.11);
}

.item-block__icon {
  margin-top: 0.375rem;
  margin-left: 0.375rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.item-block__icon::before {
  color: #fff;
  font-size: 1.1875rem;
}

.item-block--green .item-block__icon {
  background-color: #84c864;
}

.item-block--pink .item-block__icon {
  background-color: #f66e78;
}

.item-block--orange .item-block__icon {
  background-color: #ffb65c;
}

.item-block--grey .item-block__icon {
  background-color: #c1cbce;
}

.item-block__top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5625rem;
}

.item-block__top:not(:last-child) {
  margin-bottom: 0.4375rem;
}

.item-block__counter {
  color: #2b3354;
  font-size: 1.625rem;
  font-weight: 700;
}

.item-block__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-weight: 600;
  min-width: 2.8125rem;
  text-align: center;
  gap: 0.1875rem;
  padding: 0.3125rem 0.4375rem;
  border-radius: 1.25rem;
}

.item-block__info::before {
  font-size: 0.5rem;
}

.item-block--green .item-block__info {
  background-color: rgba(132, 200, 100, 0.11);
  color: #84c864;
}

.item-block--pink .item-block__info {
  background-color: rgba(246, 110, 120, 0.11);
  color: #f66e78;
}

.item-block--orange .item-block__info {
  background-color: rgba(255, 182, 92, 0.11);
  color: #ffb65c;
}

.item-block--grey .item-block__info {
  background-color: rgba(193, 203, 206, 0.11);
  color: #c1cbce;
}

.item-block__bottom {
  color: #c1cbce;
  font-weight: 400;
}

/*
.icon-menu {
	display: none;
	@media (max-width: $mobile) {
		display: block;
		position: relative;
		width: rem(30);
		height: rem(18);
		z-index: 5;
		@media (any-hover: none) {
			cursor: default;
		}
		span,
		&::before,
		&::after {
			content: "";
			transition: all 0.3s ease 0s;
			right: 0;
			position: absolute;
			width: 100%;
			height: rem(2);
			background-color: #000;
		}
		&::before {
			top: 0;
		}
		&::after {
			bottom: 0;
		}
		span {
			top: calc(50% - rem(1));
		}
		.menu-open & {
			span {
				width: 0;
			}
			&::before,
			&::after {
			}
			&::before {
				top: calc(50% - rem(1));
				transform: rotate(-45deg);
			}
			&::after {
				bottom: calc(50% - rem(1));
				transform: rotate(45deg);
			}
		}
	}
}
*/

.page__main {
  padding-top: 4.3125rem;
  padding-bottom: 4.3125rem;
}

.page__block {
  position: relative;
  z-index: 3;
}

.main {
  background: -webkit-gradient(linear, left top, right top, from(#5a49d2), to(#fb4e6e));
  background: linear-gradient(90deg, #5a49d2 0%, #fb4e6e 100%);
  position: relative;
}

.main::before {
  content: "";
  position: absolute;
  top: 6%;
  right: 8.25641%;
  /* 120/1170 */
  width: 65.487179%;
  /* 696/1170 */
  height: 40.970149%;
  /* 241/670 */
  background: url("/assets/img/work/motwi/main/wave.svg") 0 0/contain no-repeat;
  z-index: 1;
  pointer-events: none;
  opacity: 0.4;
}

.main__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.main__media {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
  position: relative;
}

.main__notebook {
  position: relative;
  padding-bottom: 65%;
  -webkit-transform: translate(0px, 20%);
      -ms-transform: translate(0px, 20%);
          transform: translate(0px, 20%);
  opacity: 0;
  z-index: 2;
}

._watcher-view .main__notebook {
  opacity: 1;
  -webkit-transform: translate(0px, 0);
      -ms-transform: translate(0px, 0);
          transform: translate(0px, 0);
  -webkit-transition: all 0.9s;
  transition: all 0.9s;
}

.main__notebook-image {
  position: absolute;
  top: -2.5rem;
  left: 0;
  width: 192%;
  height: 155%;
  -webkit-transform: translate(-32%, 0px);
      -ms-transform: translate(-32%, 0px);
          transform: translate(-32%, 0px);
  -o-object-fit: contain;
     object-fit: contain;
  z-index: 1;
}

.main__notebook-shadow {
  position: absolute;
  top: 53%;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -webkit-transform: translate(-19%, 0px);
      -ms-transform: translate(-19%, 0px);
          transform: translate(-19%, 0px);
}

.main__phone {
  position: absolute;
  top: 42%;
  right: -9%;
  width: 67%;
  height: 48%;
  z-index: 1;
  -webkit-transform: translate(0px, 20%) rotate(-2deg);
      -ms-transform: translate(0px, 20%) rotate(-2deg);
          transform: translate(0px, 20%) rotate(-2deg);
  opacity: 0;
}

._watcher-view .main__phone {
  opacity: 1;
  -webkit-transform: translate(0px, 0) rotate(-2deg);
      -ms-transform: translate(0px, 0) rotate(-2deg);
          transform: translate(0px, 0) rotate(-2deg);
  -webkit-transition: all 0.9s 0.5s;
  transition: all 0.9s 0.5s;
}

.main__phone-image {
  position: absolute;
  width: 100%;
  height: auto;
  z-index: 2;
}

.main__phone-shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 8%;
  left: -7%;
}

.main__content {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 22.709924%;
          flex: 0 0 22.709924%;
  /* 238/1048 */
}

.main__logo {
  display: inline-block;
  -webkit-transform: scale(0.7);
      -ms-transform: scale(0.7);
          transform: scale(0.7);
  opacity: 0;
}

.main__logo::before {
  font-size: 2.8125rem;
  color: #fff;
}

.main__logo:not(:last-child) {
  margin-bottom: 1.875rem;
}

._watcher-view .main__logo {
  opacity: 1;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
}

.main__round-image {
  border-radius: 50%;
  max-width: 12.875rem;
  margin: 0 auto;
  -webkit-transform: scale(0.7);
      -ms-transform: scale(0.7);
          transform: scale(0.7);
  opacity: 0;
}

._watcher-view .main__round-image {
  opacity: 1;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition: all 0.6s 0.3s;
  transition: all 0.6s 0.3s;
}

.main__round-image img {
  border-radius: 50%;
  max-width: 100%;
}

.main__powerbank {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transform: scale(0.7);
      -ms-transform: scale(0.7);
          transform: scale(0.7);
  opacity: 0;
}

.main__powerbank img {
  max-width: 100%;
}

._watcher-view .main__powerbank {
  opacity: 1;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition: all 0.6s 0.6s;
  transition: all 0.6s 0.6s;
}

.about__container {
  position: relative;
}

.about__container::before,
.about__container::after {
  content: "";
  position: absolute;
}

.about__container::before {
  background: url("/assets/img/work/motwi/about/bg_1.svg") 0 0 no-repeat;
  left: 0;
  bottom: 12.42236%;
  /* 140/1127 */
  width: 55.811966%;
  /* 653/1170 */
  height: 171px;
  -webkit-transform: translate(-28%, 0px);
      -ms-transform: translate(-28%, 0px);
          transform: translate(-28%, 0px);
}

.about__container::after {
  background: url("/assets/img/work/motwi/about/bg_2.svg") 0 0 no-repeat;
  right: 0;
  top: 21%;
  width: 55.811966%;
  /* 653/1170 */
  height: 171px;
  -webkit-transform: translate(36%, 0px);
      -ms-transform: translate(36%, 0px);
          transform: translate(36%, 0px);
}

.about__title {
  color: #121212;
  max-width: 34.1875rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.about__media {
border: 10px solid #000;
border-radius: 1.25rem;
position: relative;
z-index: 2;
padding-bottom: 53.722334%;



}
.about__media img {
max-width: 100%;
border-radius: 0.625rem;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

.mobile__phones {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 2.125rem;
}

.mobile__phone {
  position: relative;
  opacity: 0;
}

.mobile__phone img {
  max-width: 100%;
}

.mobile__phone:nth-child(1) {
  -webkit-transform: translate(100%, 0px);
      -ms-transform: translate(100%, 0px);
          transform: translate(100%, 0px);
}

.mobile__phone:nth-child(3) {
  -webkit-transform: translate(-100%, 0px);
      -ms-transform: translate(-100%, 0px);
          transform: translate(-100%, 0px);
}

.mobile__phone._watcher-view:nth-child(1) {
  opacity: 1;
  -webkit-transform: translate(0px, 0px);
      -ms-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
  -webkit-transition: all 0.8s 0.6s;
  transition: all 0.8s 0.6s;
}

.mobile__phone._watcher-view:nth-child(2) {
  opacity: 1;
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
  z-index: 3;
}

.mobile__phone._watcher-view:nth-child(3) {
  opacity: 1;
  -webkit-transform: translate(0px, 0px);
      -ms-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
  -webkit-transition: all 0.8s 1.2s;
  transition: all 0.8s 1.2s;
}

.mobile__phone--small {
  padding-top: 2.5rem;
}

.mobile__gif {
  position: absolute;
  top: 2.651515%;
  /* 14/234 */
  left: 5.982906%;
  /* 14/528 */
  width: 88.034188%;
  height: 94.62366%;
  border-radius: 1.875rem;
}

.mobile__decor {
  position: absolute;
  top: 2.651515%;
  left: 50%;
  width: 38.549618%;
  /* 101/262 */
  height: 3.787879%;
  /* 20/528 */
  -webkit-transform: translate(-50%, 0px);
      -ms-transform: translate(-50%, 0px);
          transform: translate(-50%, 0px);
}

.components__row {
  display: -ms-grid;
  display: grid;
  gap: 1.25rem;
  position: relative;
}

.components__row img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.components__row:not(:last-child) {
  margin-bottom: 1.25rem;
}

.components__full {
  -webkit-transform: translate(0px, 20%);
      -ms-transform: translate(0px, 20%);
          transform: translate(0px, 20%);
  opacity: 0;
}

.components__full._watcher-view {
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
  -webkit-transform: translate(0px, 0px);
      -ms-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
  opacity: 1;
}

.components__row-3col {
  -ms-grid-columns: 25.739645% 1fr 13.708087%;
  grid-template-columns: 25.739645% 1fr 13.708087%;
  /* 558/1014 */
}

.components__row-3col .components__column:nth-child(2) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

.components__row-3col .components__column:nth-child(3) {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}

.components__column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.25rem;
  position: relative;
  opacity: 0;
  -webkit-transform: translate(-20%, 0px);
      -ms-transform: translate(-20%, 0px);
          transform: translate(-20%, 0px);
}

.components__column._watcher-view {
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
  -webkit-transform: translate(0px, 0px);
      -ms-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
  opacity: 1;
}

.components__row-3item {
  -ms-grid-columns: (1fr)[3];
  grid-template-columns: repeat(3, 1fr);
}

.components__row-3item .components__column:nth-child(2) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

.components__row-3item .components__column:nth-child(3) {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}

.components__row-2col {
  -ms-grid-columns: 54.832347% 1fr;
  grid-template-columns: 54.832347% 1fr;
  /* 556/1014 */
}

.components__row-2col .components__column:nth-child(2) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

.components__row-2col .components__column:nth-child(3) {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}

.components__row-4item {
  -ms-grid-columns: (1fr)[4];
  grid-template-columns: repeat(4, 1fr);
}

.components__row-4item .components__column:nth-child(2) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

.components__row-4item .components__column:nth-child(3) {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}

.components__row-4item .components__column:nth-child(4) {
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}

.social__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.5rem;
}

.social__row img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

.social__item:not(:last-child) {
  margin-bottom: 1.5625rem;
}

.styleguide__logos {
  display: -ms-grid;
  display: grid;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-grid-columns: 60.165119% 1fr;
  grid-template-columns: 60.165119% 1fr;
  /* 583/969 */
}

.styleguide__logos:not(:last-child) {
  margin-bottom: 2.5rem;
}

.styleguide__logo::before {
  font-size: 2.9375rem;
}

.styleguide__logo--pink::before {
  color: #fb4e6e;
}

.styleguide__logo--dark::before {
  color: #2b3354;
}

.styleguide__block {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 39.834881% 1fr 39.834881%;
  grid-template-columns: 39.834881% 1fr 39.834881%;
  /* 386/969 */
  min-height: 150%;
}

.styleguide__column {
  padding: 0.5rem 0.8125rem;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  line-height: 1.5;
}

.styleguide__column--pink {
  background-color: #fb4e6e;
}

.styleguide__item > .styleguide__column {
  padding-top: 4.0625rem;
}

.styleguide__column--lightblue {
  background-color: #5f76e8;
}

.styleguide__column--grey {
  background-color: #89949f;
}

.styleguide__column--dark {
  background-color: #2b3354;
}

.styleguide__gradient-line {
  background: -webkit-gradient(linear, left top, right top, from(#5a49d2), to(#fb4e6e));
  background: linear-gradient(90deg, #5a49d2 0%, #fb4e6e 100%);
  width: 0;
  height: 7.625rem;
}

.styleguide__gradient-line:not(:last-child) {
  margin-bottom: 1.25rem;
}

._watcher-view .styleguide__gradient-line {
  width: 100%;
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
}

.styleguide__gradient-items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1.25rem;
}

.styleguide__gradient-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.8125rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.styleguide__gradient-item:nth-child(1) .styleguide__gradient-color {
  background-color: #5a48d2;
}

.styleguide__gradient-item:nth-child(2) {
  opacity: 0;
}

._watcher-view .styleguide__gradient-item:nth-child(2) {
  opacity: 1;
  -webkit-transition: all 0.3s 0.7s;
  transition: all 0.3s 0.7s;
}

.styleguide__gradient-item:nth-child(2) .styleguide__gradient-color {
  background-color: #f94e6f;
}

.styleguide__gradient-color {
  width: 2.3125rem;
  height: 2.3125rem;
}

.styleguide__gradient-text {
  color: #2b3354;
  font-size: 0.75rem;
  line-height: 1.4166666667;
}

.styleguide__box {
  max-width: 51.875rem;
  margin: 0 auto;
  position: relative;
}

.styleguide__box::before {
  content: "";
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1.25rem;
  -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
          box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.styleguide__box-top {
  background: -webkit-gradient(linear, left top, right top, from(#5a49d2), to(#fb4e6e));
  background: linear-gradient(90deg, #5a49d2 0%, #fb4e6e 100%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 7.5625rem;
  position: relative;
}

.no-webp .styleguide__box-top::before{
  background: url("/assets/img/work/motwi/styleguide/1.png") 0 0/contain no-repeat; }

.styleguide__box-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3.4375rem;
  height: 100%;
  z-index: 1;
}

.no-webp .styleguide__box-top::after{
  background: url("/assets/img/work/motwi/styleguide/2.png") 0 0/contain no-repeat; }

.styleguide__box-top::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 3.4375rem;
  height: 100%;
  z-index: 1;
}

.styleguide__box-top a {
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 0.9090909091;
  -webkit-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
          transform: rotate(-180deg);
}

.styleguide__box-top span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

.styleguide__box-body {
  background: -webkit-gradient(linear, left top, right top, from(#5a49d2), to(#fb4e6e));
  background: linear-gradient(90deg, #5a49d2 0%, #fb4e6e 100%);
  min-height: 22.5625rem;
  padding: 2.3125rem 0rem 0rem 2.875rem;
  position: relative;
}

.styleguide__box-body::before {
  content: "";
  background: url("/assets/img/work/motwi/styleguide/wave.svg") 0 0 no-repeat;
  position: absolute;
  right: 0;
  top: 22.160665%;
  /* 80/361 */
  width: 78.345499%;
  /* 644/822 */
  height: 61.495845%;
  /* 222/361 */
}

.styleguide__box-content {
  color: #fff;
  font-size: 0.5rem;
  line-height: 1.25;
}

.styleguide__box-logo {
  display: inline-block;
  margin-bottom: 1.375rem;
}

.styleguide__box-logo::before {
  font-size: 1.75rem;
}

@media (min-width: 47.99875em) {
  .block__header {
    padding: 0 4.875rem;
  }

  .block__item:not(:last-child) {
    margin-bottom: 1.375rem;
  }

  .block__themes {
    padding-right: 1.25rem;
  }

  .about__wrapper {
    padding: 0 5.5rem;
  }

  .social__row:nth-child(even) .social__column:nth-child(2) {
    padding-top: 1.375rem;
  }
}

@media (min-width: 61.99875em) {
  .components__body {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }

  .social__body {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .styleguide__body {
    padding: 0 2.46875rem;
  }
}

@media (min-width: 75em) {
  .title {
    font-size: 2.0625rem;
  }

  .block__header {
    margin-bottom: 5rem;
  }

  .block_p140 {
    padding-top: 8.75rem;
  }

  .mobile__content .block__left,
  .social__content .block__left,
  .styleguide__content .block__left {
    padding-right: 7.5rem;
  }

  .styleguide__content .block__right span {
    font-size: 2rem;
  }

  .block__icons {
    row-gap: 3.3125rem;
  }

  .block__icons {
    padding-top: 9.1875rem;
  }

  .block__icons {
    padding-bottom: 9.1875rem;
  }

  .block__logo::before {
    font-size: 5.6875rem;
  }

  .page__block {
    padding-top: 5rem;
  }

  .about__container {
    padding-bottom: 13.75rem;
  }

  .about__title:not(:last-child) {
    margin-bottom: 9.375rem;
  }

  .mobile__phones {
    padding-left: 7.125rem;
  }

  .mobile__phones {
    padding-right: 7.125rem;
  }

  .mobile__phones {
    padding-bottom: 9.0625rem;
  }

  .components__body {
    padding-bottom: 9.0625rem;
  }

  .social__body {
    padding-bottom: 9.0625rem;
  }

  .styleguide__body:not(:last-child) {
    margin-bottom: 5rem;
  }

  .styleguide__top:not(:last-child) {
    margin-bottom: 2.5rem;
  }

  .styleguide__wrapper {
    padding-bottom: 9.0625rem;
  }
}

@media (max-width: 75em) {
  .main__phone {
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
  }

  .main__phone-image {
    width: auto;
    left: 38%;
    top: 35%;
  }

  .main__phone-shadow {
    width: auto;
    height: auto;
    left: 35%;
    top: 31%;
  }
}

@media (max-width: 25em) {
  .block__colors {
    max-width: 17.5rem;
  }

  .styleguide__box-body {
    min-height: 9.375rem;
  }
}

@media (max-width: 20em) {
  .title {
    font-size: 1.625rem;
  }

  .block__header {
    margin-bottom: 1.875rem;
  }

  .block_p140 {
    padding-top: 3.75rem;
  }

  .styleguide__content .block__right span {
    font-size: 1.5rem;
  }

  .block__icons {
    row-gap: 1.25rem;
  }

  .block__logo::before {
    font-size: 2.25rem;
  }

  .page__block {
    padding-top: 3.125rem;
  }

  .about__container {
    padding-bottom: 5rem;
  }

  .about__title:not(:last-child) {
    margin-bottom: 3.75rem;
  }

  .mobile__phones {
    padding-left: 0.0000000625rem;
  }

  .mobile__phones {
    padding-right: 0.0000000625rem;
  }

  .styleguide__body:not(:last-child) {
    margin-bottom: 2.8125rem;
  }

  .styleguide__top:not(:last-child) {
    margin-bottom: 1.875rem;
  }
}

@media (max-width: 61.99875em) {
  .block__right-body {
    padding: 0.625rem 1.25rem;
  }

  .main__phone-image {
    width: 75%;
    top: 25%;
  }

  .main__phone-shadow {
    width: 63%;
    left: 37%;
    top: 21%;
  }

  .styleguide__logos {
    -ms-grid-columns: 2fr 1fr;
    grid-template-columns: 2fr 1fr;
    /* 583/969 */
  }

  .styleguide__block {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
    /* 386/969 */
  }
}

@media (max-width: 53.125em) {
  .components__row-3col {
    -ms-grid-columns: 1fr 2.158fr;
    grid-template-columns: 1fr 2.158fr;
  }

  .components__row-3col .components__column:nth-child(3) {
    -ms-grid-column-span: 2;
    grid-column: span 2;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }

  .components__row-3col .components__column:nth-child(3) .components__column-image:nth-child(1) {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 50%;
            flex: 0 1 50%;
  }

  .components__row-3col .components__column:nth-child(3) .components__column-image:nth-child(2) {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 50%;
            flex: 0 1 50%;
  }
}

@media (max-width: 47.99875em) {
  .title {
    text-align: center;
  }

  .block__divided--blue-pink::before,
  .block__divided--blue-pink::after {
    content: "";
    display: none;
  }

  .block__divided--blue::before,
  .block__divided--blue::after {
    display: none;
  }

  .block__container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .block__left {
    margin-left: -0.9375rem;
    margin-right: -0.9375rem;
    padding: 2.8125rem 0.9375rem;
    width: calc(100% + 1.875rem);
  }

  .about__content .block__left {
    background-color: #5c49d1;
  }

  .mobile__content .block__left,
  .social__content .block__left,
  .styleguide__content .block__left {
    padding-right: 0.9375rem;
  }

  .mobile__content .block__left,
  .social__content .block__left,
  .styleguide__content .block__left {
    background-color: #00d2fb;
  }

  .components__content .block__left {
    background-color: #5c49d1;
  }

  .styleguide__content .block__left-body {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  .block__left-body {
    text-align: center;
  }

  .block__items {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 1.25rem;
  }

  .block__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 calc((100% - 1.25rem * 1) / 2);
            flex: 0 1 calc((100% - 1.25rem * 1) / 2);
  }

  .block__right {
    margin-left: -0.9375rem;
    margin-right: -0.9375rem;
    padding: 2.8125rem 0.9375rem;
    width: calc(100% + 1.875rem);
  }

  .about__content .block__right,
  .components__content .block__right {
    background-color: #fb4e6e;
  }

  .mobile__content .block__right,
  .social__content .block__right {
    background-color: #5c49d1;
  }

  .styleguide__content .block__right {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }

  .no-webp .styleguide__content .block__right{
    background: url("/assets/img/work/motwi/styleguide/01.jpg") 0 0/cover no-repeat; }

  .styleguide__content .block__right {
    min-height: 18.75rem;
  }

  .block__right-body {
    padding: 0;
  }

  .block__themes {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-top: 1.5625rem;
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }

  .block__icons {
    padding-top: 2.5rem;
  }

  .block__icons {
    padding-bottom: 2.5rem;
  }

  .block__icons {
    padding: 0;
  }

  .block__icon::before {
    font-size: 2.375rem;
  }

  .item-block {
    padding: 0.9375rem;
  }

  .page__main {
    padding-top: 1.875rem;
  }

  .main::before {
    right: 0;
    width: 100%;
  }

  .main__container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    gap: 1.25rem;
  }

  ._watcher-view .main__phone {
    -webkit-transition: all 0.9s 0.3s;
    transition: all 0.9s 0.3s;
  }

  .main__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }

  .main__logo {
    margin-left: auto;
  }

  .main__round-image {
    display: none;
  }

  .main__powerbank {
    display: none;
  }

  .about__container::before {
    width: 100%;
    bottom: 0;
    -webkit-transform: translate(0, 0%);
        -ms-transform: translate(0, 0%);
            transform: translate(0, 0%);
    background: url("/assets/img/work/motwi/about/bg_1.svg") 0 0/100% 100% no-repeat;
  }

  .about__container::after {
    width: 100%;
    top: 20%;
    opacity: 0.6;
    -webkit-transform: translate(0, 0%);
        -ms-transform: translate(0, 0%);
            transform: translate(0, 0%);
    background: url("/assets/img/work/motwi/about/bg_2.svg") 0 0/100% 100% no-repeat;
  }

  .mobile__phones {
    padding-bottom: 3.125rem;
  }

  .mobile__phone:nth-child(1) {
    -webkit-transform: translate(20%, 0px);
        -ms-transform: translate(20%, 0px);
            transform: translate(20%, 0px);
  }

  .mobile__phone:nth-child(2) {
    -webkit-transform: translate(-20%, 0px);
        -ms-transform: translate(-20%, 0px);
            transform: translate(-20%, 0px);
  }

  .mobile__phone:nth-child(3) {
    -webkit-transform: translate(20%, 0px);
        -ms-transform: translate(20%, 0px);
            transform: translate(20%, 0px);
  }

  .mobile__phone._watcher-view {
    -webkit-transition: all 0.8s 0.2s !important;
    transition: all 0.8s 0.2s !important;
  }

  .mobile__phone._watcher-view:nth-child(1) {
    opacity: 1;
    -webkit-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }

  .mobile__phone._watcher-view:nth-child(2) {
    opacity: 1;
    -webkit-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
    z-index: 3;
  }

  .mobile__phone._watcher-view:nth-child(3) {
    opacity: 1;
    -webkit-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }

  .components__body {
    padding-bottom: 3.125rem;
  }

  .components__row {
    gap: 0.625rem;
  }

  .components__row:not(:last-child) {
    margin-bottom: 0.625rem;
  }

  .social__body {
    padding-bottom: 1.875rem;
  }

  .social__row img {
    height: 100%;
  }

  .social__row {
    gap: 0.625rem;
  }

  .social__row:not(:last-child) {
    margin-bottom: 0.625rem;
  }

  .social__column {
    min-height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .social__item:not(:last-child) {
    margin-bottom: 0.625rem;
  }

  .social__item {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
            flex: 1 1 100%;
  }

  .styleguide__logo::before {
    font-size: 2.25rem;
  }

  .styleguide__wrapper {
    padding-bottom: 1.875rem;
  }

  .styleguide__box-body {
    min-height: 12.5rem;
    padding: 1.25rem 0rem 0rem 1.5625rem;
  }

  .styleguide__box-body::before {
    content: "";
    background: url("/assets/img/work/motwi/styleguide/wave.svg") 0 0/contain no-repeat;
    height: 100%;
  }
}

@media (max-width: 37.5em) {
  .mobile__phones {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  .components__row-3item {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }

  .components__row-2col {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }

  .components__row-4item {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }

  .styleguide__logo::before {
    font-size: 1.5rem;
  }

  .styleguide__block {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }

  .styleguide__column {
    padding-top: 4.0625rem;
  }

  .styleguide__column:nth-child(1) {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }

  .styleguide__item {
    -ms-grid-column-span: 2;
    grid-column: span 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .styleguide__item > .styleguide__column {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 50%;
            flex: 0 1 50%;
  }

  .styleguide__box-top {
    height: 3.75rem;
  }

  .no-webp .styleguide__box-top::after{
    background: url("/assets/img/work/motwi/styleguide/2.png") 0 0/contain no-repeat; }

  .styleguide__box-top::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1.6875rem;
    height: 100%;
    z-index: 1;
  }
}

@media (max-width: 35.625em) {
  .block__item {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
            flex: 1 1 100%;
  }
}

@media (max-width: 34.375em) {
  .social__row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

@media (max-width: 29.99875em) {
  .block__icon::before {
    font-size: 1.625rem;
  }

  .about__container::before {
    bottom: -5%;
  }

  .about__container::after {
    background: url("/assets/img/work/motwi/about/bg_2.svg") 0 0/cover no-repeat;
    height: 30%;
    top: 30%;
  }

  .styleguide__column {
    font-size: 0.75rem;
  }

  .styleguide__gradient-color {
    width: 1.25rem;
    height: 1.25rem;
  }
}

@media (min-width: 20em) and (max-width: 75em) {
@supports (font-size: clamp( 1.625rem , 1.4659090909rem  +  0.7954545455vw , 2.0625rem )) {
    .title {
      font-size: clamp( 1.625rem , 1.4659090909rem  +  0.7954545455vw , 2.0625rem );
    }
}

@supports not (font-size: clamp( 1.625rem , 1.4659090909rem  +  0.7954545455vw , 2.0625rem )) {
    .title {
      font-size: calc(1.625rem + 0.4375 * (100vw - 20rem) / 55);
    }
}

@supports (margin-bottom: clamp( 1.875rem , 0.7386363636rem  +  5.6818181818vw , 5rem )) {
    .block__header {
      margin-bottom: clamp( 1.875rem , 0.7386363636rem  +  5.6818181818vw , 5rem );
    }
}

@supports not (margin-bottom: clamp( 1.875rem , 0.7386363636rem  +  5.6818181818vw , 5rem )) {
    .block__header {
      margin-bottom: calc(1.875rem + 3.125 * (100vw - 20rem) / 55);
    }
}

@supports (padding-top: clamp( 3.75rem , 1.9318181818rem  +  9.0909090909vw , 8.75rem )) {
    .block_p140 {
      padding-top: clamp( 3.75rem , 1.9318181818rem  +  9.0909090909vw , 8.75rem );
    }
}

@supports not (padding-top: clamp( 3.75rem , 1.9318181818rem  +  9.0909090909vw , 8.75rem )) {
    .block_p140 {
      padding-top: calc(3.75rem + 5 * (100vw - 20rem) / 55);
    }
}

@supports (font-size: clamp( 1.5rem , 1.3181818182rem  +  0.9090909091vw , 2rem )) {
    .styleguide__content .block__right span {
      font-size: clamp( 1.5rem , 1.3181818182rem  +  0.9090909091vw , 2rem );
    }
}

@supports not (font-size: clamp( 1.5rem , 1.3181818182rem  +  0.9090909091vw , 2rem )) {
    .styleguide__content .block__right span {
      font-size: calc(1.5rem + 0.5 * (100vw - 20rem) / 55);
    }
}

@supports (row-gap: clamp( 1.25rem , 0.5rem  +  3.75vw , 3.3125rem )) {
    .block__icons {
      row-gap: clamp( 1.25rem , 0.5rem  +  3.75vw , 3.3125rem );
    }
}

@supports not (row-gap: clamp( 1.25rem , 0.5rem  +  3.75vw , 3.3125rem )) {
    .block__icons {
      row-gap: calc(1.25rem + 2.0625 * (100vw - 20rem) / 55);
    }
}

@supports (font-size: clamp( 2.25rem , 1rem  +  6.25vw , 5.6875rem )) {
    .block__logo::before {
      font-size: clamp( 2.25rem , 1rem  +  6.25vw , 5.6875rem );
    }
}

@supports not (font-size: clamp( 2.25rem , 1rem  +  6.25vw , 5.6875rem )) {
    .block__logo::before {
      font-size: calc(2.25rem + 3.4375 * (100vw - 20rem) / 55);
    }
}

@supports (padding-top: clamp( 3.125rem , 2.4431818182rem  +  3.4090909091vw , 5rem )) {
    .page__block {
      padding-top: clamp( 3.125rem , 2.4431818182rem  +  3.4090909091vw , 5rem );
    }
}

@supports not (padding-top: clamp( 3.125rem , 2.4431818182rem  +  3.4090909091vw , 5rem )) {
    .page__block {
      padding-top: calc(3.125rem + 1.875 * (100vw - 20rem) / 55);
    }
}

@supports (padding-bottom: clamp( 5rem , 1.8181818182rem  +  15.9090909091vw , 13.75rem )) {
    .about__container {
      padding-bottom: clamp( 5rem , 1.8181818182rem  +  15.9090909091vw , 13.75rem );
    }
}

@supports not (padding-bottom: clamp( 5rem , 1.8181818182rem  +  15.9090909091vw , 13.75rem )) {
    .about__container {
      padding-bottom: calc(5rem + 8.75 * (100vw - 20rem) / 55);
    }
}

@supports (margin-bottom: clamp( 3.75rem , 1.7045454545rem  +  10.2272727273vw , 9.375rem )) {
    .about__title:not(:last-child) {
      margin-bottom: clamp( 3.75rem , 1.7045454545rem  +  10.2272727273vw , 9.375rem );
    }
}

@supports not (margin-bottom: clamp( 3.75rem , 1.7045454545rem  +  10.2272727273vw , 9.375rem )) {
    .about__title:not(:last-child) {
      margin-bottom: calc(3.75rem + 5.625 * (100vw - 20rem) / 55);
    }
}

@supports (padding-left: clamp( 0.0000000625rem , -2.5909090057rem  +  12.9545453409vw , 7.125rem )) {
    .mobile__phones {
      padding-left: clamp( 0.0000000625rem , -2.5909090057rem  +  12.9545453409vw , 7.125rem );
    }
}

@supports not (padding-left: clamp( 0.0000000625rem , -2.5909090057rem  +  12.9545453409vw , 7.125rem )) {
    .mobile__phones {
      padding-left: calc(0.0000000625rem + 7.1249999375 * (100vw - 20rem) / 55);
    }
}

@supports (padding-right: clamp( 0.0000000625rem , -2.5909090057rem  +  12.9545453409vw , 7.125rem )) {
    .mobile__phones {
      padding-right: clamp( 0.0000000625rem , -2.5909090057rem  +  12.9545453409vw , 7.125rem );
    }
}

@supports not (padding-right: clamp( 0.0000000625rem , -2.5909090057rem  +  12.9545453409vw , 7.125rem )) {
    .mobile__phones {
      padding-right: calc(0.0000000625rem + 7.1249999375 * (100vw - 20rem) / 55);
    }
}

@supports (margin-bottom: clamp( 2.8125rem , 2.0170454545rem  +  3.9772727273vw , 5rem )) {
    .styleguide__body:not(:last-child) {
      margin-bottom: clamp( 2.8125rem , 2.0170454545rem  +  3.9772727273vw , 5rem );
    }
}

@supports not (margin-bottom: clamp( 2.8125rem , 2.0170454545rem  +  3.9772727273vw , 5rem )) {
    .styleguide__body:not(:last-child) {
      margin-bottom: calc(2.8125rem + 2.1875 * (100vw - 20rem) / 55);
    }
}

@supports (margin-bottom: clamp( 1.875rem , 1.6477272727rem  +  1.1363636364vw , 2.5rem )) {
    .styleguide__top:not(:last-child) {
      margin-bottom: clamp( 1.875rem , 1.6477272727rem  +  1.1363636364vw , 2.5rem );
    }
}

@supports not (margin-bottom: clamp( 1.875rem , 1.6477272727rem  +  1.1363636364vw , 2.5rem )) {
    .styleguide__top:not(:last-child) {
      margin-bottom: calc(1.875rem + 0.625 * (100vw - 20rem) / 55);
    }
}
}

@media (min-width: 47.99875em) and (max-width: 75em) {
@supports (padding-right: clamp( 0.9375rem , -10.7283227628rem  +  24.3044303504vw , 7.5rem )) {
    .mobile__content .block__left,
    .social__content .block__left,
    .styleguide__content .block__left {
      padding-right: clamp( 0.9375rem , -10.7283227628rem  +  24.3044303504vw , 7.5rem );
    }
}

@supports not (padding-right: clamp( 0.9375rem , -10.7283227628rem  +  24.3044303504vw , 7.5rem )) {
    .mobile__content .block__left,
    .social__content .block__left,
    .styleguide__content .block__left {
      padding-right: calc(0.9375rem + 6.5625 * (100vw - 47.99875rem) / 27.00125);
    }
}

@supports (padding-top: clamp( 2.5rem , -9.3880289107rem  +  24.7673718809vw , 9.1875rem )) {
    .block__icons {
      padding-top: clamp( 2.5rem , -9.3880289107rem  +  24.7673718809vw , 9.1875rem );
    }
}

@supports not (padding-top: clamp( 2.5rem , -9.3880289107rem  +  24.7673718809vw , 9.1875rem )) {
    .block__icons {
      padding-top: calc(2.5rem + 6.6875 * (100vw - 47.99875rem) / 27.00125);
    }
}

@supports (padding-bottom: clamp( 2.5rem , -9.3880289107rem  +  24.7673718809vw , 9.1875rem )) {
    .block__icons {
      padding-bottom: clamp( 2.5rem , -9.3880289107rem  +  24.7673718809vw , 9.1875rem );
    }
}

@supports not (padding-bottom: clamp( 2.5rem , -9.3880289107rem  +  24.7673718809vw , 9.1875rem )) {
    .block__icons {
      padding-bottom: calc(2.5rem + 6.6875 * (100vw - 47.99875rem) / 27.00125);
    }
}

@supports (padding-bottom: clamp( 3.125rem , -7.4297920235rem  +  21.989722698vw , 9.0625rem )) {
    .mobile__phones {
      padding-bottom: clamp( 3.125rem , -7.4297920235rem  +  21.989722698vw , 9.0625rem );
    }
}

@supports not (padding-bottom: clamp( 3.125rem , -7.4297920235rem  +  21.989722698vw , 9.0625rem )) {
    .mobile__phones {
      padding-bottom: calc(3.125rem + 5.9375 * (100vw - 47.99875rem) / 27.00125);
    }
}

@supports (padding-bottom: clamp( 3.125rem , -7.4297920235rem  +  21.989722698vw , 9.0625rem )) {
    .components__body {
      padding-bottom: clamp( 3.125rem , -7.4297920235rem  +  21.989722698vw , 9.0625rem );
    }
}

@supports not (padding-bottom: clamp( 3.125rem , -7.4297920235rem  +  21.989722698vw , 9.0625rem )) {
    .components__body {
      padding-bottom: calc(3.125rem + 5.9375 * (100vw - 47.99875rem) / 27.00125);
    }
}

@supports (padding-bottom: clamp( 1.875rem , -10.9018535022rem  +  26.6191380029vw , 9.0625rem )) {
    .social__body {
      padding-bottom: clamp( 1.875rem , -10.9018535022rem  +  26.6191380029vw , 9.0625rem );
    }
}

@supports not (padding-bottom: clamp( 1.875rem , -10.9018535022rem  +  26.6191380029vw , 9.0625rem )) {
    .social__body {
      padding-bottom: calc(1.875rem + 7.1875 * (100vw - 47.99875rem) / 27.00125);
    }
}

@supports (padding-bottom: clamp( 1.875rem , -10.9018535022rem  +  26.6191380029vw , 9.0625rem )) {
    .styleguide__wrapper {
      padding-bottom: clamp( 1.875rem , -10.9018535022rem  +  26.6191380029vw , 9.0625rem );
    }
}

@supports not (padding-bottom: clamp( 1.875rem , -10.9018535022rem  +  26.6191380029vw , 9.0625rem )) {
    .styleguide__wrapper {
      padding-bottom: calc(1.875rem + 7.1875 * (100vw - 47.99875rem) / 27.00125);
    }
}
}

@media (max-width: 56.25em) and (min-width: 37.5em) {
  .mobile__gif {
    border-radius: 1.25rem;
  }
}

.webp .styleguide__content .block__divided::after{ background: url(/assets/img/work/motwi/styleguide/01.webp) 0 0/cover no-repeat; }

.webp .styleguide__box-top::before{ background: url(/assets/img/work/motwi/styleguide/1.webp) 0 0/contain no-repeat; }

.webp .styleguide__box-top::after{ background: url(/assets/img/work/motwi/styleguide/2.webp) 0 0/contain no-repeat; }

@media (max-width: 47.99875em){

  .webp .styleguide__content .block__right{ background: url(/assets/img/work/motwi/styleguide/01.webp) 0 0/cover no-repeat; }
}

@media (max-width: 37.5em){

  .webp .styleguide__box-top::after{ background: url(/assets/img/work/motwi/styleguide/2.webp) 0 0/contain no-repeat; }
}