renamed rem() function to pxToRem() to avoid conflicting with native css rem function (#1084)

This commit is contained in:
trean
2024-08-13 16:58:57 +02:00
committed by GitHub
parent 32aa793f28
commit 74172782a5
119 changed files with 988 additions and 988 deletions
@@ -112,11 +112,11 @@ $font-family-base: 'Satoshi', 'Helvetica Neue', 'Noto Sans', 'Liberation Sans',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
$font-family-code: 'Source Code Pro', 'Overpass Mono', SFMono-Regular, 'Droid Sans Mono', Menlo, Monaco, Consolas, 'Lucida Console', 'Monaco', monospace; $font-family-code: 'Source Code Pro', 'Overpass Mono', SFMono-Regular, 'Droid Sans Mono', Menlo, Monaco, Consolas, 'Lucida Console', 'Monaco', monospace;
$font-size-xs: rem(12); $font-size-xs: pxToRem(12);
$font-size-s: rem(14); $font-size-s: pxToRem(14);
$font-size-md: rem(16); $font-size-md: pxToRem(16);
$font-size-l: rem(18); $font-size-l: pxToRem(18);
$font-size-xl: rem(20); $font-size-xl: pxToRem(20);
$font-sizes-text: ( $font-sizes-text: (
'xs': $font-size-xs, 'xs': $font-size-xs,
@@ -132,30 +132,30 @@ $font-size-lg: $font-size-l;
$font-weight-base: $font-weight-medium; $font-weight-base: $font-weight-medium;
$line-height-sm: rem(21); $line-height-sm: pxToRem(21);
$line-height-lg: rem(27); $line-height-lg: pxToRem(27);
$h1-font-size: rem(64); $h1-font-size: pxToRem(64);
$h2-font-size: rem(56); $h2-font-size: pxToRem(56);
$h3-font-size: rem(48); $h3-font-size: pxToRem(48);
$h4-font-size: rem(40); $h4-font-size: pxToRem(40);
$h5-font-size: rem(32); $h5-font-size: pxToRem(32);
$h6-font-size: rem(24); $h6-font-size: pxToRem(24);
$font-sizes: ( $font-sizes: (
1: rem(64), 1: pxToRem(64),
2: rem(56), 2: pxToRem(56),
3: rem(48), 3: pxToRem(48),
4: rem(40), 4: pxToRem(40),
5: rem(32), 5: pxToRem(32),
6: rem(24), 6: pxToRem(24),
); );
$headings-font-weight: 700; $headings-font-weight: 700;
$headings-line-height: 1.2; $headings-line-height: 1.2;
$display-font-sizes: ( $display-font-sizes: (
1: rem(80), 1: pxToRem(80),
//2: 4.5rem, //2: 4.5rem,
//3: 4rem, //3: 4rem,
//4: 3.5rem, //4: 3.5rem,
@@ -199,4 +199,4 @@ $spacers: (
$code-snippet-border-radius: $border-radius * 2; $code-snippet-border-radius: $border-radius * 2;
$post-content-width: rem(920); $post-content-width: pxToRem(920);
@@ -5,8 +5,8 @@ aside[role='status'] {
position: relative; position: relative;
padding: $spacer * 1.5 $spacer * 1.5 $spacer * 1.5 $spacer * 3.5; padding: $spacer * 1.5 $spacer * 1.5 $spacer * 1.5 $spacer * 3.5;
margin-bottom: $spacer; margin-bottom: $spacer;
font-size: rem(14); font-size: pxToRem(14);
line-height: rem(21); line-height: pxToRem(21);
border-radius: $spacer * 0.5; border-radius: $spacer * 0.5;
&:before { &:before {
@@ -15,7 +15,7 @@ aside[role='status'] {
position: absolute; position: absolute;
left: $spacer * 1.5; left: $spacer * 1.5;
top: $spacer * 1.5; top: $spacer * 1.5;
height: rem(20); height: pxToRem(20);
width: $spacer; width: $spacer;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
@@ -28,11 +28,11 @@ aside[role='alert'] {
color: $warning-70; color: $warning-70;
a { a {
color: $warning-70; color: $warning-70;
border-bottom: rem(1) solid $warning-70; border-bottom: pxToRem(1) solid $warning-70;
} }
&:before { &:before {
content: '\26A0'; content: '\26A0';
font-size: rem(12); font-size: pxToRem(12);
} }
code { code {
color: $warning-70; color: $warning-70;
@@ -44,11 +44,11 @@ aside[role='status'] {
color: $secondary-blue-70; color: $secondary-blue-70;
a { a {
color: $secondary-blue-70; color: $secondary-blue-70;
border-bottom: rem(1) solid $secondary-blue-70; border-bottom: pxToRem(1) solid $secondary-blue-70;
} }
&:before { &:before {
content: '\24D8'; content: '\24D8';
font-size: rem(24); font-size: pxToRem(24);
} }
code { code {
color: $secondary-blue-70; color: $secondary-blue-70;
@@ -11,9 +11,9 @@
); );
$padding: ( $padding: (
sm: 0 rem(20), sm: 0 pxToRem(20),
md: 0 rem(22), md: 0 pxToRem(22),
lg: 0 rem(28), lg: 0 pxToRem(28),
); );
// STYLES // STYLES
@@ -11,15 +11,15 @@
); );
$padding: ( $padding: (
md: rem(7) $spacer, md: pxToRem(7) $spacer,
lg: rem(11) $spacer, lg: pxToRem(11) $spacer,
); );
// STYLES // STYLES
width: 100%; width: 100%;
height: map-get($height, md); height: map-get($height, md);
padding: map-get($padding, md); padding: map-get($padding, md);
border: rem(1) solid $neutral-50; border: pxToRem(1) solid $neutral-50;
border-radius: $spacer * 0.5; border-radius: $spacer * 0.5;
background-color: transparent; background-color: transparent;
color: $neutral-94; color: $neutral-94;
@@ -29,7 +29,7 @@
} }
&:focus { &:focus {
border: rem(1) solid $neutral-100; border: pxToRem(1) solid $neutral-100;
} }
&:active, &:active,
@@ -72,14 +72,14 @@
.dropdown { .dropdown {
&__button { &__button {
position: relative; position: relative;
padding: rem(7) $spacer * 2.5 rem(7) $spacer; padding: pxToRem(7) $spacer * 2.5 pxToRem(7) $spacer;
text-align: left; text-align: left;
&:after { &:after {
content: ''; content: '';
display: block; display: block;
position: absolute; position: absolute;
top: rem(12); top: pxToRem(12);
right: $spacer; right: $spacer;
height: $spacer; height: $spacer;
width: $spacer; width: $spacer;
@@ -15,9 +15,9 @@
&-title { &-title {
font-size: $spacer * 1.5; font-size: $spacer * 1.5;
line-height: rem(34); line-height: pxToRem(34);
color: $neutral-20; color: $neutral-20;
margin-bottom: rem(12); margin-bottom: pxToRem(12);
} }
&-description { &-description {
@@ -29,15 +29,15 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
color: $neutral-30; color: $neutral-30;
margin-bottom: rem(12); margin-bottom: pxToRem(12);
} }
&-about { &-about {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
gap: $spacer * 0.5; gap: $spacer * 0.5;
font-size: rem(14); font-size: pxToRem(14);
line-height: rem(21); line-height: pxToRem(21);
color: $neutral-50; color: $neutral-50;
p { p {
@@ -1,6 +1,6 @@
@use 'sass:math'; @use 'sass:math';
@function rem($value) { @function pxToRem($value) {
$remValue: math.div($value, 16) + rem; $remValue: math.div($value, 16) + rem;
@return $remValue; @return $remValue;
} }
@@ -11,14 +11,14 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: rem(40); padding: pxToRem(40);
background: linear-gradient(#161e33, #0e1424); background: linear-gradient(#161e33, #0e1424);
border-radius: rem(16); border-radius: pxToRem(16);
p { p {
margin-bottom: rem(32); margin-bottom: pxToRem(32);
font-size: rem(20); font-size: pxToRem(20);
line-height: rem(30); line-height: pxToRem(30);
text-align: center; text-align: center;
color: #f0f3fa; color: #f0f3fa;
} }
@@ -35,13 +35,13 @@
&__content { &__content {
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
padding: rem(40) rem(64); padding: pxToRem(40) pxToRem(64);
p { p {
max-width: $contentWidth; max-width: $contentWidth;
margin-bottom: 0; margin-bottom: 0;
font-size: rem(24); font-size: pxToRem(24);
line-height: rem(34); line-height: pxToRem(34);
text-align: left; text-align: left;
} }
} }
@@ -18,19 +18,19 @@
&__content { &__content {
position: relative; position: relative;
background: $blockBackground; background: $blockBackground;
border-radius: rem(8); border-radius: pxToRem(8);
overflow: hidden; overflow: hidden;
a { a {
margin-bottom: rem(40); margin-bottom: pxToRem(40);
} }
img { img {
display: block; display: block;
width: 100%; width: 100%;
max-width: rem(300); max-width: pxToRem(300);
margin: 0 auto; margin: 0 auto;
padding: 0 rem(17.5); padding: 0 pxToRem(17.5);
} }
} }
@@ -42,22 +42,22 @@
} }
&__title { &__title {
padding: rem(40) rem(24) 0 rem(24); padding: pxToRem(40) pxToRem(24) 0 pxToRem(24);
margin-bottom: rem(24); margin-bottom: pxToRem(24);
font-size: rem(24); font-size: pxToRem(24);
line-height: rem(34); line-height: pxToRem(34);
text-align: center; text-align: center;
color: #f0f3fa; color: #f0f3fa;
@include bs.media-breakpoint-up(lg) { @include bs.media-breakpoint-up(lg) {
font-size: rem(32); font-size: pxToRem(32);
line-height: rem(38); line-height: pxToRem(38);
} }
} }
&__description { &__description {
margin-top: -16px; margin-top: -16px;
margin-bottom: rem(16); margin-bottom: pxToRem(16);
padding: 0 rem(24); padding: 0 pxToRem(24);
color: #b4bacc; color: #b4bacc;
text-align: center; text-align: center;
} }
@@ -66,8 +66,8 @@
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
width: rem(220); width: pxToRem(220);
height: rem(220); height: pxToRem(220);
background-image: url('/img/blurred/blurred-light-6.svg'); background-image: url('/img/blurred/blurred-light-6.svg');
background-position: top; background-position: top;
background-size: cover; background-size: cover;
@@ -78,44 +78,44 @@
padding-bottom: $paddingBottom; padding-bottom: $paddingBottom;
&__content { &__content {
min-height: rem(210); min-height: pxToRem(210);
background: $blockBackgroundMobile; background: $blockBackgroundMobile;
img { img {
padding: 0; padding: 0;
width: rem(300); width: pxToRem(300);
height: rem(210); height: pxToRem(210);
} }
a { a {
height: rem(40); height: pxToRem(40);
padding: 0 rem(22); padding: 0 pxToRem(22);
margin-bottom: 0; margin-bottom: 0;
} }
} }
&__title { &__title {
text-align: left; text-align: left;
margin-left: rem(56); margin-left: pxToRem(56);
padding: 0; padding: 0;
} }
&__description { &__description {
max-width: rem(570); max-width: pxToRem(570);
margin-left: rem(56); margin-left: pxToRem(56);
padding: 0; padding: 0;
text-align: left; text-align: left;
} }
.button { .button {
margin-left: rem(56); margin-left: pxToRem(56);
} }
&__text { &__text {
align-self: center; align-self: center;
align-items: flex-start; align-items: flex-start;
padding-top: rem(30); padding-top: pxToRem(30);
padding-bottom: rem(30); padding-bottom: pxToRem(30);
} }
&__image { &__image {
@@ -18,7 +18,7 @@
padding-top: $paddingTopMobile; padding-top: $paddingTopMobile;
&__title { &__title {
margin-bottom: rem(40); margin-bottom: pxToRem(40);
font-size: $titleSizeMobile; font-size: $titleSizeMobile;
line-height: $titleHeightMobile; line-height: $titleHeightMobile;
color: #161e33; color: #161e33;
@@ -28,7 +28,7 @@
&__cards { &__cards {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: rem(32); gap: pxToRem(32);
position: relative; position: relative;
} }
@@ -41,13 +41,13 @@
img { img {
width: 100%; width: 100%;
margin-bottom: rem(24); margin-bottom: pxToRem(24);
} }
h5 { h5 {
margin-bottom: rem(24); margin-bottom: pxToRem(24);
font-size: rem(20); font-size: pxToRem(20);
line-height: rem(30); line-height: pxToRem(30);
color: #161e33; color: #161e33;
text-align: center; text-align: center;
} }
@@ -65,7 +65,7 @@
&__title { &__title {
max-width: $titleWidth; max-width: $titleWidth;
margin: auto; margin: auto;
margin-bottom: rem(80); margin-bottom: pxToRem(80);
font-size: $titleSize; font-size: $titleSize;
line-height: $titleHeight; line-height: $titleHeight;
} }
@@ -73,8 +73,8 @@
&__cards { &__cards {
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
gap: rem(75); gap: pxToRem(75);
padding: rem(53) 0; padding: pxToRem(53) 0;
} }
&__card { &__card {
@@ -87,7 +87,7 @@
left: 0; left: 0;
bottom: $paddingBottom; bottom: $paddingBottom;
width: 100%; width: 100%;
height: rem(400); height: pxToRem(400);
background-image: url('/img/square-grid.png'); background-image: url('/img/square-grid.png');
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
@@ -30,11 +30,11 @@
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
width: rem(80); width: pxToRem(80);
z-index: 1; z-index: 1;
@include bs.media-breakpoint-up(lg) { @include bs.media-breakpoint-up(lg) {
width: rem(165); width: pxToRem(165);
} }
} }
&:before { &:before {
@@ -12,7 +12,7 @@
position: relative; position: relative;
margin-bottom: $spacer * 3; margin-bottom: $spacer * 3;
font-size: $spacer * 2; font-size: $spacer * 2;
line-height: rem(38); line-height: pxToRem(38);
color: $neutral-98; color: $neutral-98;
z-index: 1; z-index: 1;
} }
@@ -20,7 +20,7 @@
&__cards { &__cards {
position: relative; position: relative;
justify-content: space-between; justify-content: space-between;
gap: rem(30); gap: pxToRem(30);
z-index: 1; z-index: 1;
} }
@@ -39,8 +39,8 @@
justify-content: space-between; justify-content: space-between;
svg { svg {
max-width: rem(24); max-width: pxToRem(24);
max-height: rem(24); max-height: pxToRem(24);
} }
} }
} }
@@ -49,14 +49,14 @@
color: $neutral-98; color: $neutral-98;
margin-top: $spacer * 1.5; margin-top: $spacer * 1.5;
margin-bottom: $spacer; margin-bottom: $spacer;
line-height: rem(34); line-height: pxToRem(34);
} }
&__card-content { &__card-content {
color: $neutral-70; color: $neutral-70;
margin-bottom: $spacer * 1.5; margin-bottom: $spacer * 1.5;
font-size: map-get($font-sizes-text, 's'); font-size: map-get($font-sizes-text, 's');
line-height: rem(21); line-height: pxToRem(21);
font-weight: 500; font-weight: 500;
} }
@@ -80,7 +80,7 @@
&__title { &__title {
font-size: map-get($font-sizes, 3); font-size: map-get($font-sizes, 3);
line-height: rem(57); line-height: pxToRem(57);
margin-bottom: $spacer * 4; margin-bottom: $spacer * 4;
} }
@@ -93,7 +93,7 @@
&__card { &__card {
&-info { &-info {
width: 100%; width: 100%;
min-height: rem(333); min-height: pxToRem(333);
} }
} }
} }
@@ -39,14 +39,14 @@
padding-bottom: $spacer * 5; padding-bottom: $spacer * 5;
&__title { &__title {
max-width: rem(920); max-width: pxToRem(920);
margin: 0 auto $spacer * 5; margin: 0 auto $spacer * 5;
font-size: $spacer * 3.5; font-size: $spacer * 3.5;
line-height: rem(67); line-height: pxToRem(67);
} }
&__card { &__card {
height: rem(518); height: pxToRem(518);
&-link { &-link {
flex-grow: 1; flex-grow: 1;
@@ -16,14 +16,14 @@
&__title { &__title {
margin-bottom: $spacer * 1.5; margin-bottom: $spacer * 1.5;
font-size: $spacer * 2; font-size: $spacer * 2;
line-height: rem(38); line-height: pxToRem(38);
color: $neutral-20; color: $neutral-20;
} }
&__description { &__description {
margin-bottom: $spacer * 2.5; margin-bottom: $spacer * 2.5;
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
color: $neutral-20; color: $neutral-20;
} }
@@ -31,7 +31,7 @@
margin-top: $spacer * 5; margin-top: $spacer * 5;
margin-bottom: $spacer * 2.5; margin-bottom: $spacer * 2.5;
font-size: $spacer * 2; font-size: $spacer * 2;
line-height: rem(38); line-height: pxToRem(38);
color: $neutral-20; color: $neutral-20;
} }
@@ -48,7 +48,7 @@
justify-content: center; justify-content: center;
align-self: center; align-self: center;
width: 100%; width: 100%;
max-width: rem(288); max-width: pxToRem(288);
height: $spacer * 7.5; height: $spacer * 7.5;
margin-bottom: $spacer * 2; margin-bottom: $spacer * 2;
border-radius: $spacer * 0.5; border-radius: $spacer * 0.5;
@@ -60,8 +60,8 @@
&-title { &-title {
margin-bottom: $spacer * 0.5; margin-bottom: $spacer * 0.5;
font-size: rem(20); font-size: pxToRem(20);
line-height: rem(30); line-height: pxToRem(30);
color: $neutral-20; color: $neutral-20;
} }
@@ -73,12 +73,12 @@
&__colors { &__colors {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: rem(10); gap: pxToRem(10);
&-card { &-card {
width: 100%; width: 100%;
height: $spacer * 7.5; height: $spacer * 7.5;
padding: rem(12); padding: pxToRem(12);
border-radius: $spacer * 0.5; border-radius: $spacer * 0.5;
color: $neutral-100; color: $neutral-100;
@@ -97,8 +97,8 @@
gap: $spacer * 0.5; gap: $spacer * 0.5;
span { span {
font-size: rem(12); font-size: pxToRem(12);
line-height: rem(18); line-height: pxToRem(18);
font-weight: 300; font-weight: 300;
} }
} }
@@ -132,7 +132,7 @@
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
&__container { &__container {
max-width: rem(920); max-width: pxToRem(920);
padding: 0 $spacer; padding: 0 $spacer;
} }
@@ -141,7 +141,7 @@
&-card { &-card {
width: calc(100% / 6); width: calc(100% / 6);
height: rem(240); height: pxToRem(240);
} }
} }
@@ -155,8 +155,8 @@
} }
&-specimen { &-specimen {
font-size: rem(20); font-size: pxToRem(20);
line-height: rem(30); line-height: pxToRem(30);
} }
} }
} }
@@ -171,12 +171,12 @@
&__title { &__title {
font-size: $spacer * 3; font-size: $spacer * 3;
line-height: rem(57); line-height: pxToRem(57);
} }
&__description { &__description {
font-size: rem(20); font-size: pxToRem(20);
line-height: rem(30); line-height: pxToRem(30);
} }
&__subtitle { &__subtitle {
@@ -11,7 +11,7 @@
position: relative; position: relative;
margin-bottom: $spacer * 2.5; margin-bottom: $spacer * 2.5;
font-size: $spacer * 3.5; font-size: $spacer * 3.5;
line-height: rem(67); line-height: pxToRem(67);
color: $neutral-98; color: $neutral-98;
text-align: center; text-align: center;
z-index: 1; z-index: 1;
@@ -22,12 +22,12 @@
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
gap: $spacer; gap: $spacer;
max-width: rem(335); max-width: pxToRem(335);
margin: 0 auto; margin: 0 auto;
a { a {
width: calc(50% - 8px); width: calc(50% - 8px);
border: rem(1) solid $neutral-60; border: pxToRem(1) solid $neutral-60;
} }
} }
@@ -45,7 +45,7 @@
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
&__overlay { &__overlay {
height: rem(424); height: pxToRem(424);
background-image: url('/img/brand-resources-hero.svg'); background-image: url('/img/brand-resources-hero.svg');
} }
} }
@@ -1,7 +1,7 @@
@use '../helpers/functions' as *; @use '../helpers/functions' as *;
.carousel { .carousel {
min-height: rem(240); min-height: pxToRem(240);
background-color: $neutral-94; background-color: $neutral-94;
&__content { &__content {
@@ -19,13 +19,13 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: rem(30); gap: pxToRem(30);
width: fit-content; width: fit-content;
} }
&__image { &__image {
min-width: rem(400); min-width: pxToRem(400);
aspect-ratio: 5 / 3; aspect-ratio: 5 / 3;
height: 100%; height: 100%;
background-position: center; background-position: center;
@@ -38,7 +38,7 @@
@include media-breakpoint-up(xxl) { @include media-breakpoint-up(xxl) {
&__content { &__content {
max-width: rem(1102); max-width: pxToRem(1102);
margin: 0 auto; margin: 0 auto;
} }
} }
@@ -15,7 +15,7 @@
&__logo { &__logo {
align-self: flex-start; align-self: flex-start;
height: rem(64); height: pxToRem(64);
margin-bottom: $spacer * 1.5; margin-bottom: $spacer * 1.5;
} }
@@ -25,8 +25,8 @@
} }
&__description { &__description {
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
color: $neutral-70; color: $neutral-70;
margin-bottom: $spacer * 1.5; margin-bottom: $spacer * 1.5;
b { b {
@@ -38,7 +38,7 @@
position: relative; position: relative;
align-self: flex-end; align-self: flex-end;
width: calc(100% - 24px); width: calc(100% - 24px);
max-width: rem(440); max-width: pxToRem(440);
margin-left: $spacer * 1.5; margin-left: $spacer * 1.5;
background-image: url('/img/case-study-bg.svg'); background-image: url('/img/case-study-bg.svg');
background-size: 100%; background-size: 100%;
@@ -48,7 +48,7 @@
&-image { &-image {
width: 100%; width: 100%;
padding: rem(28) 0 0 rem(28); padding: pxToRem(28) 0 0 pxToRem(28);
} }
&-overlay { &-overlay {
@@ -61,7 +61,7 @@
background-image: url('/img/blurred/blurred-light-13.svg'); background-image: url('/img/blurred/blurred-light-13.svg');
background-position: top; background-position: top;
background-size: cover; background-size: cover;
border-radius: 0 rem(12) 0 0; border-radius: 0 pxToRem(12) 0 0;
z-index: -1; z-index: -1;
} }
} }
@@ -73,7 +73,7 @@
&__content { &__content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: rem(472); min-height: pxToRem(472);
padding: $spacer * 4 $spacer * 3 $spacer * 4 $spacer * 5; padding: $spacer * 4 $spacer * 3 $spacer * 4 $spacer * 5;
} }
@@ -85,11 +85,11 @@
} }
&__tiitle { &__tiitle {
width: rem(520); width: pxToRem(520);
} }
&__description { &__description {
width: rem(520); width: pxToRem(520);
//margin-bottom: $spacer * 5; //margin-bottom: $spacer * 5;
} }
@@ -99,8 +99,8 @@
} }
&-overlay { &-overlay {
width: rem(597); width: pxToRem(597);
height: rem(472); height: pxToRem(472);
left: -150px; left: -150px;
} }
} }
@@ -20,14 +20,14 @@
&-title { &-title {
font-size: $spacer * 1.5; font-size: $spacer * 1.5;
line-height: rem(34); line-height: pxToRem(34);
color: $neutral-20; color: $neutral-20;
margin-bottom: rem(12); margin-bottom: pxToRem(12);
} }
&-description { &-description {
color: $neutral-40; color: $neutral-40;
margin-bottom: rem(12); margin-bottom: pxToRem(12);
} }
&-link { &-link {
@@ -42,20 +42,20 @@
} }
&__resources-cards { &__resources-cards {
margin-bottom: rem(30); margin-bottom: pxToRem(30);
& > div { & > div {
&:first-of-type, &:first-of-type,
&:last-of-type { &:last-of-type {
img { img {
min-width: rem(635); min-width: pxToRem(635);
} }
} }
&:nth-of-type(2), &:nth-of-type(2),
&:nth-of-type(3) { &:nth-of-type(3) {
img { img {
min-width: rem(397); min-width: pxToRem(397);
} }
} }
} }
@@ -70,14 +70,14 @@
&-title { &-title {
font-size: $spacer * 1.5; font-size: $spacer * 1.5;
line-height: rem(34); line-height: pxToRem(34);
color: $neutral-20; color: $neutral-20;
margin-bottom: $spacer; margin-bottom: $spacer;
} }
&-description { &-description {
font-size: rem(14); font-size: pxToRem(14);
line-height: rem(21); line-height: pxToRem(21);
color: $neutral-40; color: $neutral-40;
margin-bottom: $spacer * 1.5; margin-bottom: $spacer * 1.5;
} }
@@ -93,7 +93,7 @@
&__title { &__title {
font-size: $spacer * 3.5; font-size: $spacer * 3.5;
line-height: rem(67); line-height: pxToRem(67);
margin-bottom: $spacer * 5; margin-bottom: $spacer * 5;
} }
@@ -2,5 +2,5 @@
@use '../mixins/get-contacted' as get-contacted; @use '../mixins/get-contacted' as get-contacted;
.community-get-contacted { .community-get-contacted {
@include get-contacted.base($spacer * 2.5, $spacer * 2.5, $spacer * 6.5, $spacer * 4, rem(350)); @include get-contacted.base($spacer * 2.5, $spacer * 2.5, $spacer * 6.5, $spacer * 4, pxToRem(350));
} }
@@ -27,8 +27,8 @@
} }
&__description { &__description {
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
margin-bottom: $spacer * 3; margin-bottom: $spacer * 3;
color: $neutral-70; color: $neutral-70;
text-align: center; text-align: center;
@@ -45,8 +45,8 @@
width: 100%; width: 100%;
input[type='email'] { input[type='email'] {
padding-top: rem(11); padding-top: pxToRem(11);
padding-bottom: rem(11); padding-bottom: pxToRem(11);
} }
} }
@@ -61,8 +61,8 @@
} }
&__about { &__about {
font-size: rem(14); font-size: pxToRem(14);
line-height: rem(21); line-height: pxToRem(21);
margin-bottom: $spacer * 2.5; margin-bottom: $spacer * 2.5;
color: $neutral-50; color: $neutral-50;
text-align: center; text-align: center;
@@ -74,7 +74,7 @@
left: 0; left: 0;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: rem(200); height: pxToRem(200);
background-image: url('/img/blurred/blurred-light-12.svg'); background-image: url('/img/blurred/blurred-light-12.svg');
background-position: center; background-position: center;
background-size: cover; background-size: cover;
@@ -95,19 +95,19 @@
} }
&__title { &__title {
max-width: rem(680); max-width: pxToRem(680);
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
font-size: $spacer * 4; font-size: $spacer * 4;
line-height: rem(76); line-height: pxToRem(76);
} }
&__description { &__description {
max-width: rem(680); max-width: pxToRem(680);
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
font-size: rem(20); font-size: pxToRem(20);
line-height: rem(30); line-height: pxToRem(30);
} }
&__form { &__form {
@@ -125,7 +125,7 @@
&__about { &__about {
position: relative; position: relative;
max-width: rem(520); max-width: pxToRem(520);
margin: 0 auto; margin: 0 auto;
z-index: 1; z-index: 1;
} }
@@ -27,7 +27,7 @@
&__user { &__user {
display: flex; display: flex;
gap: rem(12); gap: pxToRem(12);
&-avatar { &-avatar {
height: $spacer * 3; height: $spacer * 3;
@@ -55,16 +55,16 @@
&-nickname { &-nickname {
margin-bottom: 0; margin-bottom: 0;
font-size: rem(12); font-size: pxToRem(12);
line-height: rem(18); line-height: pxToRem(18);
color: $neutral-80; color: $neutral-80;
} }
&:after { &:after {
content: ''; content: '';
display: block; display: block;
width: rem(20); width: pxToRem(20);
height: rem(20); height: pxToRem(20);
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.03687 12.6263L3.67375 18.7501H0.703125L7.64937 10.8151L9.03687 12.6263Z' fill='%23F0F3FA'/%3E%3Cpath d='M10.6562 6.8675L15.5669 1.25H18.5356L12.0312 8.68875L10.6562 6.8675Z' fill='%23F0F3FA'/%3E%3Cpath d='M19.6803 18.75H13.7059L0.320312 1.25H6.44594L19.6803 18.75ZM14.5253 16.9731H16.1703L5.55219 2.93375H3.78719L14.5253 16.9731Z' fill='%23F0F3FA'/%3E%3C/svg%3E%0A"); background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.03687 12.6263L3.67375 18.7501H0.703125L7.64937 10.8151L9.03687 12.6263Z' fill='%23F0F3FA'/%3E%3Cpath d='M10.6562 6.8675L15.5669 1.25H18.5356L12.0312 8.68875L10.6562 6.8675Z' fill='%23F0F3FA'/%3E%3Cpath d='M19.6803 18.75H13.7059L0.320312 1.25H6.44594L19.6803 18.75ZM14.5253 16.9731H16.1703L5.55219 2.93375H3.78719L14.5253 16.9731Z' fill='%23F0F3FA'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
@@ -87,14 +87,14 @@
&__title { &__title {
font-size: $spacer * 3.5; font-size: $spacer * 3.5;
line-height: rem(67); line-height: pxToRem(67);
margin-bottom: $spacer * 5; margin-bottom: $spacer * 5;
} }
&__cards { &__cards {
flex-wrap: wrap; flex-wrap: wrap;
gap: rem(30); gap: pxToRem(30);
height: rem(500); height: pxToRem(500);
} }
&__card { &__card {
@@ -109,7 +109,7 @@
@include media-breakpoint-up(xl) { @include media-breakpoint-up(xl) {
&__cards { &__cards {
height: rem(452); height: pxToRem(452);
} }
} }
} }
@@ -15,13 +15,13 @@
&__description { &__description {
margin-bottom: 0; margin-bottom: 0;
font-size: rem(14); font-size: pxToRem(14);
line-height: rem(21); line-height: pxToRem(21);
color: $neutral-70; color: $neutral-70;
} }
form { form {
$last-row-margin: rem(34); $last-row-margin: pxToRem(34);
display: flex; display: flex;
margin-top: $spacer * 2; margin-top: $spacer * 2;
@@ -79,12 +79,12 @@
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
width: rem(220); width: pxToRem(220);
height: rem(192); height: pxToRem(192);
background-image: url('/img/blurred/blurred-light-9.png'); background-image: url('/img/blurred/blurred-light-9.png');
background-position: top; background-position: top;
background-size: cover; background-size: cover;
border-radius: 0 rem(12) 0 0; border-radius: 0 pxToRem(12) 0 0;
} }
@include media-breakpoint-up(xl) { @include media-breakpoint-up(xl) {
@@ -14,7 +14,7 @@
&__title, &__title,
&__sales-title { &__sales-title {
font-size: $spacer * 2; font-size: $spacer * 2;
line-height: rem(38); line-height: pxToRem(38);
color: $neutral-98; color: $neutral-98;
margin-bottom: $spacer * 1.5; margin-bottom: $spacer * 1.5;
} }
@@ -30,7 +30,7 @@
align-items: flex-start; align-items: flex-start;
gap: $spacer * 0.5; gap: $spacer * 0.5;
padding: $spacer * 1.5 0; padding: $spacer * 1.5 0;
border-top: rem(1) solid $neutral-20; border-top: pxToRem(1) solid $neutral-20;
&:not(:last-of-type) { &:not(:last-of-type) {
margin-bottom: $spacer * 0.5; margin-bottom: $spacer * 0.5;
@@ -42,14 +42,14 @@
} }
&-title { &-title {
font-size: rem(20); font-size: pxToRem(20);
line-height: rem(30); line-height: pxToRem(30);
color: $neutral-98; color: $neutral-98;
} }
&-description { &-description {
font-size: rem(14); font-size: pxToRem(14);
line-height: rem(21); line-height: pxToRem(21);
color: $neutral-70; color: $neutral-70;
margin-bottom: 0; margin-bottom: 0;
} }
@@ -97,16 +97,16 @@
} }
&__info { &__info {
width: rem(382); width: pxToRem(382);
} }
&__form { &__form {
width: rem(600); width: pxToRem(600);
} }
&__title { &__title {
font-size: $spacer * 3; font-size: $spacer * 3;
line-height: rem(57); line-height: pxToRem(57);
} }
&__sales-title { &__sales-title {
@@ -115,8 +115,8 @@
} }
&__description { &__description {
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
} }
} }
} }
@@ -12,8 +12,8 @@
justify-content: center; justify-content: center;
&__title { &__title {
font-size: rem(40); font-size: pxToRem(40);
line-height: rem(48); line-height: pxToRem(48);
text-align: start; text-align: start;
margin-bottom: $spacer * 1.5; margin-bottom: $spacer * 1.5;
max-width: 100%; max-width: 100%;
@@ -21,7 +21,7 @@
&__subtitle { &__subtitle {
font-size: map-get($font-sizes-text, 'l'); font-size: map-get($font-sizes-text, 'l');
line-height: rem(27); line-height: pxToRem(27);
margin-bottom: $spacer * 1.5; margin-bottom: $spacer * 1.5;
max-width: 100%; max-width: 100%;
text-align: start; text-align: start;
@@ -31,7 +31,7 @@
color: $neutral-20; color: $neutral-20;
margin-top: $spacer * 1.5; margin-top: $spacer * 1.5;
margin-bottom: $spacer; margin-bottom: $spacer;
line-height: rem(34); line-height: pxToRem(34);
} }
&__cloud-native { &__cloud-native {
@@ -50,22 +50,22 @@
padding-top: $spacer * 2; padding-top: $spacer * 2;
@include media-breakpoint-up(xl) { @include media-breakpoint-up(xl) {
padding-right: rem(122); padding-right: pxToRem(122);
padding-top: $spacer * 5; padding-top: $spacer * 5;
} }
} }
.core-features__card-title { .core-features__card-title {
font-size: rem(24); font-size: pxToRem(24);
line-height: rem(34); line-height: pxToRem(34);
margin-top: 0; margin-top: 0;
margin-bottom: rem(12); margin-bottom: pxToRem(12);
} }
.core-features__card-content { .core-features__card-content {
font-size: map-get($font-sizes-text, 'l'); font-size: map-get($font-sizes-text, 'l');
line-height: rem(27); line-height: pxToRem(27);
margin-bottom: rem(12); margin-bottom: pxToRem(12);
} }
} }
@@ -74,8 +74,8 @@
background: url('/img/qdrant-cloud.png') right bottom no-repeat; background: url('/img/qdrant-cloud.png') right bottom no-repeat;
background-size: contain; background-size: contain;
max-width: 100% !important; max-width: 100% !important;
width: rem(372); width: pxToRem(372);
height: rem(214); height: pxToRem(214);
border-radius: 0 0 calc($spacer / 2) 0; border-radius: 0 0 calc($spacer / 2) 0;
aspect-ratio: 1.45/1; aspect-ratio: 1.45/1;
align-self: end; align-self: end;
@@ -99,24 +99,24 @@
&__title { &__title {
font-size: map-get($font-sizes, 2); font-size: map-get($font-sizes, 2);
text-align: center; text-align: center;
line-height: rem(67); line-height: pxToRem(67);
max-width: rem(920); max-width: pxToRem(920);
} }
&__subtitle { &__subtitle {
font-size: map-get($font-sizes-text, 'xl'); font-size: map-get($font-sizes-text, 'xl');
line-height: rem(30); line-height: pxToRem(30);
max-width: rem(920); max-width: pxToRem(920);
text-align: center; text-align: center;
} }
&__cards { &__cards {
margin-left: rem(-15); margin-left: pxToRem(-15);
margin-right: rem(-15); margin-right: pxToRem(-15);
} }
&__cards > div { &__cards > div {
padding: 0 rem(15); padding: 0 pxToRem(15);
} }
&__card { &__card {
@@ -124,39 +124,39 @@
padding-bottom: $spacer * 2.5; padding-bottom: $spacer * 2.5;
padding-left: $spacer * 2.5; padding-left: $spacer * 2.5;
padding-right: $spacer * 2.5; padding-right: $spacer * 2.5;
min-height: rem(390); min-height: pxToRem(390);
svg { svg {
max-width: rem(48); max-width: pxToRem(48);
max-height: rem(48); max-height: pxToRem(48);
} }
} }
&__cloud-native { &__cloud-native {
padding-top: rem(75); padding-top: pxToRem(75);
padding-bottom: rem(75); padding-bottom: pxToRem(75);
max-width: rem(1110); max-width: pxToRem(1110);
min-height: rem(420); min-height: pxToRem(420);
padding-left: $spacer * 3; padding-left: $spacer * 3;
padding-right: $spacer * 3; padding-right: $spacer * 3;
margin-top: $spacer * 5; margin-top: $spacer * 5;
.core-features__card-title { .core-features__card-title {
font-size: map-get($font-sizes-text, 'xxl'); font-size: map-get($font-sizes-text, 'xxl');
line-height: rem(48); line-height: pxToRem(48);
margin-bottom: $spacer * 1.5; margin-bottom: $spacer * 1.5;
} }
.core-features__card-content { .core-features__card-content {
font-size: map-get($font-sizes-text, 'l'); font-size: map-get($font-sizes-text, 'l');
line-height: rem(27); line-height: pxToRem(27);
margin-bottom: $spacer * 1.5; margin-bottom: $spacer * 1.5;
} }
} }
&__cloud-native-image { &__cloud-native-image {
width: rem(540); width: pxToRem(540);
height: rem(372); height: pxToRem(372);
} }
} }
} }
@@ -12,8 +12,8 @@
&__title { &__title {
margin-bottom: $spacer * 3; margin-bottom: $spacer * 3;
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
font-weight: 400; font-weight: 400;
color: $neutral-20; color: $neutral-20;
text-align: center; text-align: center;
@@ -39,7 +39,7 @@
&__title { &__title {
font-size: $spacer * 1.5; font-size: $spacer * 1.5;
line-height: rem(34); line-height: pxToRem(34);
font-weight: 600; font-weight: 600;
} }
} }
@@ -15,7 +15,7 @@
&__header { &__header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-width: rem(1110); max-width: pxToRem(1110);
min-width: 100%; min-width: 100%;
margin-bottom: $spacer * 2.5; margin-bottom: $spacer * 2.5;
} }
@@ -40,8 +40,8 @@
outline: none; outline: none;
border: 1px solid $neutral-80; border: 1px solid $neutral-80;
background-color: transparent; background-color: transparent;
width: rem(64); width: pxToRem(64);
height: rem(64); height: pxToRem(64);
display: flex; display: flex;
align-items: center; align-items: center;
@@ -53,8 +53,8 @@
} }
&__button svg { &__button svg {
width: rem(24); width: pxToRem(24);
height: rem(24); height: pxToRem(24);
} }
&__button:disabled { &__button:disabled {
@@ -62,8 +62,8 @@
} }
&__title { &__title {
font-size: rem(32); font-size: pxToRem(32);
line-height: rem(38); line-height: pxToRem(38);
color: $neutral-20; color: $neutral-20;
text-align: center; text-align: center;
margin: 0; margin: 0;
@@ -84,11 +84,11 @@
padding-bottom: $spacer * 2; padding-bottom: $spacer * 2;
margin-bottom: $spacer * 2; margin-bottom: $spacer * 2;
min-height: rem(407); min-height: pxToRem(407);
img { img {
max-width: rem(120); max-width: pxToRem(120);
max-height: rem(64); max-height: pxToRem(64);
} }
} }
@@ -98,14 +98,14 @@
} }
&__avatar { &__avatar {
height: rem(48); height: pxToRem(48);
text-align: right; text-align: right;
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: flex-start; justify-content: flex-start;
img { img {
width: rem(48); width: pxToRem(48);
height: rem(48); height: pxToRem(48);
&:not(:first-of-type) { &:not(:first-of-type) {
margin-left: $spacer * -1; margin-left: $spacer * -1;
z-index: 1; z-index: 1;
@@ -134,7 +134,7 @@
&__title { &__title {
font-size: map-get($font-sizes, 3); font-size: map-get($font-sizes, 3);
line-height: rem(57); line-height: pxToRem(57);
text-align: left; text-align: left;
} }
@@ -145,7 +145,7 @@
&__header-content { &__header-content {
justify-content: space-between; justify-content: space-between;
margin-top: 0; margin-top: 0;
height: rem(64); height: pxToRem(64);
} }
&__cards-wrapper { &__cards-wrapper {
@@ -157,8 +157,8 @@
} }
&__cards { &__cards {
margin-left: rem(-15); margin-left: pxToRem(-15);
margin-right: rem(-15); margin-right: pxToRem(-15);
} }
.splide { .splide {
margin-left: -20px; margin-left: -20px;
@@ -12,7 +12,7 @@
&-preview { &-preview {
position: relative; position: relative;
margin-bottom: $spacer * 1.5; margin-bottom: $spacer * 1.5;
border-radius: rem(4); border-radius: pxToRem(4);
overflow: hidden; overflow: hidden;
&:after { &:after {
@@ -2,5 +2,5 @@
@use '../mixins/get-contacted' as get-contacted; @use '../mixins/get-contacted' as get-contacted;
.customers-get-contacted { .customers-get-contacted {
@include get-contacted.base(0, 0, $spacer * 7.5, $spacer * 4, rem(350)); @include get-contacted.base(0, 0, $spacer * 7.5, $spacer * 4, pxToRem(350));
} }
@@ -17,8 +17,8 @@
} }
&__description { &__description {
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
color: $neutral-70; color: $neutral-70;
margin-bottom: $spacer; margin-bottom: $spacer;
} }
@@ -29,7 +29,7 @@
left: 0; left: 0;
bottom: -30px; bottom: -30px;
width: 100%; width: 100%;
height: rem(240); height: pxToRem(240);
background-image: url('/img/blurred/blurred-light-14.svg'); background-image: url('/img/blurred/blurred-light-14.svg');
background-position: center; background-position: center;
background-size: cover; background-size: cover;
@@ -50,13 +50,13 @@
&__title { &__title {
font-size: $spacer * 4; font-size: $spacer * 4;
line-height: rem(76); line-height: pxToRem(76);
} }
&__description { &__description {
font-size: rem(20); font-size: pxToRem(20);
line-height: rem(30); line-height: pxToRem(30);
max-width: rem(640); max-width: pxToRem(640);
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
@@ -33,7 +33,7 @@
&__user { &__user {
display: flex; display: flex;
gap: rem(12); gap: pxToRem(12);
&-avatar { &-avatar {
height: $spacer * 3; height: $spacer * 3;
@@ -62,16 +62,16 @@
&-position { &-position {
margin-bottom: 0; margin-bottom: 0;
font-size: rem(12); font-size: pxToRem(12);
line-height: rem(18); line-height: pxToRem(18);
color: $neutral-50; color: $neutral-50;
} }
&:after { &:after {
content: ''; content: '';
display: block; display: block;
width: rem(20); width: pxToRem(20);
height: rem(20); height: pxToRem(20);
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_4665_8685)'%3E%3Cpath d='M19.1667 0H0.833333C0.333333 0 0 0.333333 0 0.833333V19.1667C0 19.6667 0.333333 20 0.833333 20H19.1667C19.6667 20 20 19.6667 20 19.1667V0.833333C20 0.333333 19.6667 0 19.1667 0ZM5.91667 17.0833H3V7.5H6V17.0833H5.91667ZM4.41667 6.16667C3.5 6.16667 2.66667 5.41667 2.66667 4.41667C2.66667 3.5 3.41667 2.66667 4.41667 2.66667C5.33333 2.66667 6.16667 3.41667 6.16667 4.41667C6.16667 5.41667 5.41667 6.16667 4.41667 6.16667ZM17.0833 17.0833H14.0833V12.4167C14.0833 11.3333 14.0833 9.91667 12.5833 9.91667C11 9.91667 10.8333 11.0833 10.8333 12.3333V17.0833H7.83333V7.5H10.6667V8.83333C11.0833 8.08333 12 7.33333 13.5 7.33333C16.5 7.33333 17.0833 9.33333 17.0833 11.9167V17.0833Z' fill='%23161E33'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_4665_8685'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_4665_8685)'%3E%3Cpath d='M19.1667 0H0.833333C0.333333 0 0 0.333333 0 0.833333V19.1667C0 19.6667 0.333333 20 0.833333 20H19.1667C19.6667 20 20 19.6667 20 19.1667V0.833333C20 0.333333 19.6667 0 19.1667 0ZM5.91667 17.0833H3V7.5H6V17.0833H5.91667ZM4.41667 6.16667C3.5 6.16667 2.66667 5.41667 2.66667 4.41667C2.66667 3.5 3.41667 2.66667 4.41667 2.66667C5.33333 2.66667 6.16667 3.41667 6.16667 4.41667C6.16667 5.41667 5.41667 6.16667 4.41667 6.16667ZM17.0833 17.0833H14.0833V12.4167C14.0833 11.3333 14.0833 9.91667 12.5833 9.91667C11 9.91667 10.8333 11.0833 10.8333 12.3333V17.0833H7.83333V7.5H10.6667V8.83333C11.0833 8.08333 12 7.33333 13.5 7.33333C16.5 7.33333 17.0833 9.33333 17.0833 11.9167V17.0833Z' fill='%23161E33'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_4665_8685'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
@@ -91,13 +91,13 @@
&__title { &__title {
font-size: $spacer * 3.5; font-size: $spacer * 3.5;
line-height: rem(67); line-height: pxToRem(67);
} }
&__cards { &__cards {
flex-wrap: wrap; flex-wrap: wrap;
gap: rem(30); gap: pxToRem(30);
height: rem(1452); height: pxToRem(1452);
} }
&__card { &__card {
@@ -112,7 +112,7 @@
@include media-breakpoint-up(xl) { @include media-breakpoint-up(xl) {
&__cards { &__cards {
height: rem(1264); height: pxToRem(1264);
} }
} }
} }
@@ -23,8 +23,8 @@
width: 100%; width: 100%;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding-left: rem(20); padding-left: pxToRem(20);
padding-right: rem(20); padding-right: pxToRem(20);
} }
&__link { &__link {
@@ -11,7 +11,7 @@
&__title { &__title {
font-size: $spacer * 2; font-size: $spacer * 2;
line-height: rem(38); line-height: pxToRem(38);
margin-bottom: $spacer * 1.5; margin-bottom: $spacer * 1.5;
color: $neutral-20; color: $neutral-20;
} }
@@ -35,12 +35,12 @@
&__title { &__title {
font-size: $spacer * 3; font-size: $spacer * 3;
line-height: rem(57); line-height: pxToRem(57);
} }
&__description { &__description {
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
margin-bottom: 0; margin-bottom: 0;
} }
} }
@@ -12,8 +12,8 @@
justify-content: center; justify-content: center;
&__title { &__title {
font-size: rem(40); font-size: pxToRem(40);
line-height: rem(48); line-height: pxToRem(48);
text-align: start; text-align: start;
margin-bottom: $spacer * 1.5; margin-bottom: $spacer * 1.5;
max-width: 100%; max-width: 100%;
@@ -21,7 +21,7 @@
&__subtitle { &__subtitle {
font-size: map-get($font-sizes-text, 'l'); font-size: map-get($font-sizes-text, 'l');
line-height: rem(27); line-height: pxToRem(27);
margin: 0; margin: 0;
max-width: 100%; max-width: 100%;
text-align: start; text-align: start;
@@ -42,14 +42,14 @@
color: $neutral-20; color: $neutral-20;
margin-top: calc($spacer / 2); margin-top: calc($spacer / 2);
margin-bottom: $spacer * 1.5; margin-bottom: $spacer * 1.5;
font-size: rem(24); font-size: pxToRem(24);
line-height: rem(34); line-height: pxToRem(34);
} }
&__card-description { &__card-description {
color: $neutral-30; color: $neutral-30;
font-size: rem(16); font-size: pxToRem(16);
line-height: rem(24); line-height: pxToRem(24);
margin-bottom: $spacer * 1.5; margin-bottom: $spacer * 1.5;
} }
@@ -67,8 +67,8 @@
margin-top: $spacer * 2.5; margin-top: $spacer * 2.5;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
max-width: rem(287); max-width: pxToRem(287);
max-height: rem(197); max-height: pxToRem(197);
aspect-ratio: 1.46; aspect-ratio: 1.46;
background-size: contain; background-size: contain;
background-color: $neutral-98; background-color: $neutral-98;
@@ -88,15 +88,15 @@
&__title { &__title {
font-size: map-get($font-sizes, 2); font-size: map-get($font-sizes, 2);
line-height: rem(67); line-height: pxToRem(67);
max-width: rem(445); max-width: pxToRem(445);
margin-bottom: 0; margin-bottom: 0;
} }
&__subtitle { &__subtitle {
font-size: map-get($font-sizes-text, 'xl'); font-size: map-get($font-sizes-text, 'xl');
max-width: rem(540); max-width: pxToRem(540);
line-height: rem(30); line-height: pxToRem(30);
} }
&__cards { &__cards {
@@ -114,7 +114,7 @@
} }
&__card-content { &__card-content {
max-width: rem(400); max-width: pxToRem(400);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@@ -122,19 +122,19 @@
&__card-title { &__card-title {
margin-top: 0; margin-top: 0;
font-size: rem(32); font-size: pxToRem(32);
line-height: rem(38); line-height: pxToRem(38);
} }
&__card-description { &__card-description {
font-size: rem(16); font-size: pxToRem(16);
line-height: rem(24); line-height: pxToRem(24);
} }
&__card-image { &__card-image {
margin: 0; margin: 0;
max-width: rem(560); max-width: pxToRem(560);
max-height: rem(384); max-height: pxToRem(384);
} }
} }
} }
@@ -10,7 +10,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
row-gap: rem(40); row-gap: pxToRem(40);
} }
&__description { &__description {
@@ -20,8 +20,8 @@
} }
&__title { &__title {
font-size: rem(32); font-size: pxToRem(32);
line-height: rem(38); line-height: pxToRem(38);
color: $neutral-20; color: $neutral-20;
text-align: center; text-align: center;
margin: 0; margin: 0;
@@ -29,7 +29,7 @@
&__subtitle { &__subtitle {
font-size: map-get($font-sizes-text, 'l'); font-size: map-get($font-sizes-text, 'l');
line-height: rem(27); line-height: pxToRem(27);
margin-top: $spacer * 1.5; margin-top: $spacer * 1.5;
margin-bottom: 0; margin-bottom: 0;
text-align: center; text-align: center;
@@ -52,22 +52,22 @@
&__image { &__image {
width: 100%; width: 100%;
height: rem(229); height: pxToRem(229);
max-width: rem(335); max-width: pxToRem(335);
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
position: relative; position: relative;
padding-top: rem(54); padding-top: pxToRem(54);
padding-left: rem(50); padding-left: pxToRem(50);
padding-bottom: rem(80); padding-bottom: pxToRem(80);
padding-right: rem(50); padding-right: pxToRem(50);
} }
&__image code { &__image code {
color: $neutral-98; color: $neutral-98;
font-size: rem(9); font-size: pxToRem(9);
line-height: rem(14); line-height: pxToRem(14);
} }
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
@@ -82,13 +82,13 @@
&__title { &__title {
font-size: map-get($font-sizes, 3); font-size: map-get($font-sizes, 3);
line-height: rem(57); line-height: pxToRem(57);
text-align: left; text-align: left;
} }
&__subtitle { &__subtitle {
font-size: map-get($font-sizes-text, 'xl'); font-size: map-get($font-sizes-text, 'xl');
line-height: rem(30); line-height: pxToRem(30);
text-align: left; text-align: left;
} }
@@ -98,18 +98,18 @@
} }
&__image { &__image {
width: rem(584); width: pxToRem(584);
height: rem(400); height: pxToRem(400);
max-width: rem(584); max-width: pxToRem(584);
padding-top: rem(94); padding-top: pxToRem(94);
padding-left: rem(107); padding-left: pxToRem(107);
padding-bottom: rem(80); padding-bottom: pxToRem(80);
padding-right: rem(80); padding-right: pxToRem(80);
} }
&__image code { &__image code {
font-size: rem(15); font-size: pxToRem(15);
line-height: rem(24); line-height: pxToRem(24);
} }
} }
} }
@@ -9,7 +9,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: rem(15) rem(20); padding: pxToRem(15) pxToRem(20);
cursor: pointer; cursor: pointer;
&.active { &.active {
@@ -19,8 +19,8 @@
} }
h2 { h2 {
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
font-weight: 400; font-weight: 400;
color: $neutral-90; color: $neutral-90;
margin: 0; margin: 0;
@@ -29,7 +29,7 @@
&__content { &__content {
display: none; display: none;
padding: $spacer * 1.5 $spacer * 2 rem(12); padding: $spacer * 1.5 $spacer * 2 pxToRem(12);
&.active { &.active {
display: block; display: block;
@@ -72,8 +72,8 @@
outline: none; outline: none;
border: none; border: none;
background-color: transparent; background-color: transparent;
width: rem(24); width: pxToRem(24);
height: rem(24); height: pxToRem(24);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -84,14 +84,14 @@
&-title { &-title {
color: $neutral-98; color: $neutral-98;
font-weight: bold; font-weight: bold;
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
margin: 0 0 $spacer; margin: 0 0 $spacer;
padding-top: $spacer * 0.5; padding-top: $spacer * 0.5;
} }
&-group { &-group {
padding-bottom: rem(4); padding-bottom: pxToRem(4);
&-heading { &-heading {
display: block; display: block;
@@ -113,11 +113,11 @@
summary:after { summary:after {
content: ''; content: '';
display: block; display: block;
width: rem(10); width: pxToRem(10);
height: rem(10); height: pxToRem(10);
position: absolute; position: absolute;
top: rem(7); top: pxToRem(7);
right: rem(4); right: pxToRem(4);
background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.16667 0.916341C3.10476 0.869913 3.03115 0.841641 2.95409 0.834692C2.87702 0.827742 2.79954 0.842391 2.73033 0.876997C2.66112 0.911602 2.60291 0.964797 2.56223 1.03062C2.52155 1.09644 2.5 1.17229 2.5 1.24967V8.74968C2.5 8.82706 2.52155 8.90291 2.56223 8.96873C2.60291 9.03455 2.66112 9.08775 2.73033 9.12235C2.79954 9.15696 2.87702 9.17161 2.95409 9.16466C3.03115 9.15771 3.10476 9.12944 3.16667 9.08301L8.16667 5.33301C8.21842 5.2942 8.26042 5.24387 8.28934 5.18601C8.31827 5.12816 8.33333 5.06436 8.33333 4.99967C8.33333 4.93499 8.31827 4.87119 8.28934 4.81334C8.26042 4.75548 8.21842 4.70515 8.16667 4.66634L3.16667 0.916341Z' fill='%238F98B3'/%3E%3C/svg%3E%0A"); background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.16667 0.916341C3.10476 0.869913 3.03115 0.841641 2.95409 0.834692C2.87702 0.827742 2.79954 0.842391 2.73033 0.876997C2.66112 0.911602 2.60291 0.964797 2.56223 1.03062C2.52155 1.09644 2.5 1.17229 2.5 1.24967V8.74968C2.5 8.82706 2.52155 8.90291 2.56223 8.96873C2.60291 9.03455 2.66112 9.08775 2.73033 9.12235C2.79954 9.15696 2.87702 9.17161 2.95409 9.16466C3.03115 9.15771 3.10476 9.12944 3.16667 9.08301L8.16667 5.33301C8.21842 5.2942 8.26042 5.24387 8.28934 5.18601C8.31827 5.12816 8.33333 5.06436 8.33333 4.99967C8.33333 4.93499 8.31827 4.87119 8.28934 4.81334C8.26042 4.75548 8.21842 4.70515 8.16667 4.66634L3.16667 0.916341Z' fill='%238F98B3'/%3E%3C/svg%3E%0A");
background-size: cover; background-size: cover;
background-position: center; background-position: center;
@@ -126,15 +126,15 @@
&.active { &.active {
.docs-menu__links-group-heading > a { .docs-menu__links-group-heading > a {
padding: rem(4) 0 rem(4) $spacer; padding: pxToRem(4) 0 pxToRem(4) $spacer;
border-left: rem(1) solid $primary-50; border-left: pxToRem(1) solid $primary-50;
font-weight: 600; font-weight: 600;
background-color: $neutral-30; background-color: $neutral-30;
color: $neutral-90; color: $neutral-90;
} }
summary:after { summary:after {
top: rem(11); top: pxToRem(11);
} }
} }
@@ -158,8 +158,8 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
color: $neutral-70; color: $neutral-70;
font-size: rem(14); font-size: pxToRem(14);
line-height: rem(21); line-height: pxToRem(21);
} }
&.active { &.active {
@@ -7,7 +7,7 @@
h1 { h1 {
font-size: $spacer * 2; font-size: $spacer * 2;
line-height: rem(38); line-height: pxToRem(38);
color: $neutral-98; color: $neutral-98;
margin-bottom: $spacer; margin-bottom: $spacer;
padding-top: $spacer * 0.5; padding-top: $spacer * 0.5;
@@ -17,7 +17,7 @@
h3, h3,
h4 { h4 {
font-size: $spacer * 1.5; font-size: $spacer * 1.5;
line-height: rem(34); line-height: pxToRem(34);
color: $neutral-98; color: $neutral-98;
margin-bottom: $spacer; margin-bottom: $spacer;
padding-top: $spacer * 0.5; padding-top: $spacer * 0.5;
@@ -38,7 +38,7 @@
} }
code:not([class]) { code:not([class]) {
padding: rem(4); padding: pxToRem(4);
color: $neutral-90; color: $neutral-90;
background-color: $neutral-20; background-color: $neutral-20;
} }
@@ -7,7 +7,7 @@
&__container { &__container {
@extend .container; @extend .container;
max-width: rem(1440); max-width: pxToRem(1440);
padding: 0 $spacer; padding: 0 $spacer;
} }
@@ -9,7 +9,7 @@
&__title { &__title {
margin-bottom: $spacer * 2.5; margin-bottom: $spacer * 2.5;
font-size: $spacer * 2; font-size: $spacer * 2;
line-height: rem(38); line-height: pxToRem(38);
color: $neutral-20; color: $neutral-20;
} }
@@ -32,14 +32,14 @@
&-title { &-title {
font-size: $spacer * 1.5; font-size: $spacer * 1.5;
line-height: rem(34); line-height: pxToRem(34);
margin-bottom: $spacer; margin-bottom: $spacer;
color: $neutral-20; color: $neutral-20;
} }
&-description { &-description {
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
margin-bottom: 0; margin-bottom: 0;
color: $neutral-30; color: $neutral-30;
} }
@@ -52,7 +52,7 @@
&__title { &__title {
margin-bottom: $spacer * 4; margin-bottom: $spacer * 4;
font-size: $spacer * 3; font-size: $spacer * 3;
line-height: rem(57); line-height: pxToRem(57);
text-align: center; text-align: center;
} }
@@ -13,8 +13,8 @@
} }
&__description { &__description {
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
margin-bottom: $spacer * 2; margin-bottom: $spacer * 2;
color: $neutral-70; color: $neutral-70;
} }
@@ -33,7 +33,7 @@
&__preview-mobile { &__preview-mobile {
width: 100%; width: 100%;
padding: 0 rem(12); padding: 0 pxToRem(12);
} }
&__preview { &__preview {
@@ -47,13 +47,13 @@
&__title { &__title {
font-size: $spacer * 4; font-size: $spacer * 4;
line-height: rem(76); line-height: pxToRem(76);
} }
&__description { &__description {
max-width: rem(730); max-width: pxToRem(730);
font-size: rem(20); font-size: pxToRem(20);
line-height: rem(30); line-height: pxToRem(30);
margin: 0 auto $spacer * 2 auto; margin: 0 auto $spacer * 2 auto;
} }
@@ -28,14 +28,14 @@
} }
&-link { &-link {
font-size: rem(20); font-size: pxToRem(20);
line-height: rem(30); line-height: pxToRem(30);
margin-bottom: $spacer * 2.5; margin-bottom: $spacer * 2.5;
} }
&-title { &-title {
font-size: $spacer * 2; font-size: $spacer * 2;
line-height: rem(38); line-height: pxToRem(38);
margin-bottom: $spacer * 1.5; margin-bottom: $spacer * 1.5;
color: $neutral-20; color: $neutral-20;
} }
@@ -63,7 +63,7 @@
&__title { &__title {
margin-bottom: $spacer * 7.5; margin-bottom: $spacer * 7.5;
font-size: $spacer * 3.5; font-size: $spacer * 3.5;
line-height: rem(67); line-height: pxToRem(67);
} }
&__cases { &__cases {
@@ -71,8 +71,8 @@
& > div:last-of-type { & > div:last-of-type {
img { img {
width: rem(394); width: pxToRem(394);
margin-left: rem(50); margin-left: pxToRem(50);
} }
} }
} }
@@ -87,7 +87,7 @@
} }
&-text { &-text {
width: rem(445); width: pxToRem(445);
} }
&-link { &-link {
@@ -96,16 +96,16 @@
&-title { &-title {
font-size: $spacer * 3; font-size: $spacer * 3;
line-height: rem(57); line-height: pxToRem(57);
} }
&-description { &-description {
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
} }
&-preview { &-preview {
width: rem(540); width: pxToRem(540);
text-align: left; text-align: left;
order: initial; order: initial;
@@ -15,7 +15,7 @@
} }
&__title { &__title {
margin-bottom: rem(30); margin-bottom: pxToRem(30);
font-size: $spacer * 2.5; font-size: $spacer * 2.5;
line-height: $spacer * 3; line-height: $spacer * 3;
color: $neutral-20; color: $neutral-20;
@@ -23,8 +23,8 @@
&__description { &__description {
margin: 0; margin: 0;
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
color: $neutral-30; color: $neutral-30;
} }
@@ -40,8 +40,8 @@
&__card-title { &__card-title {
margin-bottom: $spacer; margin-bottom: $spacer;
font-size: rem(20); font-size: pxToRem(20);
line-height: rem(30); line-height: pxToRem(30);
font-weight: bold; font-weight: bold;
color: $neutral-20; color: $neutral-20;
} }
@@ -58,19 +58,19 @@
&__header { &__header {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: rem(30); gap: pxToRem(30);
margin-bottom: $spacer * 5; margin-bottom: $spacer * 5;
} }
&__title { &__title {
margin: 0; margin: 0;
font-size: $spacer * 3.5; font-size: $spacer * 3.5;
line-height: rem(67); line-height: pxToRem(67);
} }
&__description { &__description {
font-size: rem(20); font-size: pxToRem(20);
line-height: rem(30); line-height: pxToRem(30);
} }
&__cards { &__cards {
@@ -80,7 +80,7 @@
'C C D D E E' 'C C D D E E'
'F F F F G G' 'F F F F G G'
'H H I I J J'; 'H H I I J J';
gap: rem(30); gap: pxToRem(30);
} }
&__card:nth-of-type(1) { &__card:nth-of-type(1) {
@@ -1,30 +1,30 @@
@use '../helpers/functions' as *; @use '../helpers/functions' as *;
.feedback { .feedback {
margin-top: rem(12); margin-top: pxToRem(12);
&__title { &__title {
color: $neutral-98; color: $neutral-98;
margin-bottom: calc($spacer / 2); margin-bottom: calc($spacer / 2);
font-size: map-get($font-sizes-text, 'md'); font-size: map-get($font-sizes-text, 'md');
line-height: rem(24); line-height: pxToRem(24);
} }
&__question { &__question {
font-size: map-get($font-sizes-text, 'md'); font-size: map-get($font-sizes-text, 'md');
line-height: rem(24); line-height: pxToRem(24);
color: $neutral-70; color: $neutral-70;
margin-bottom: rem(12); margin-bottom: pxToRem(12);
} }
&__answer { &__answer {
outline: none; outline: none;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
font-size: map-get($font-sizes-text, 'md'); font-size: map-get($font-sizes-text, 'md');
line-height: rem(24); line-height: pxToRem(24);
padding: rem(4) $spacer; padding: pxToRem(4) $spacer;
&_yes { &_yes {
color: $success-90; color: $success-90;
background-color: $success-10; background-color: $success-10;
margin-right: rem(12); margin-right: pxToRem(12);
box-sizing: border-box; box-sizing: border-box;
&:hover { &:hover {
background-color: $success-30; background-color: $success-30;
@@ -25,12 +25,12 @@
} }
&__logo { &__logo {
max-width: rem(118); max-width: pxToRem(118);
margin-bottom: $spacer * 2; margin-bottom: $spacer * 2;
} }
&__social { &__social {
max-width: rem(350); max-width: pxToRem(350);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
@@ -38,7 +38,7 @@
&__subtitle { &__subtitle {
font-size: map-get($font-sizes-text, 's'); font-size: map-get($font-sizes-text, 's');
line-height: rem(21); line-height: pxToRem(21);
color: $neutral-70; color: $neutral-70;
margin-bottom: $spacer * 2; margin-bottom: $spacer * 2;
} }
@@ -65,12 +65,12 @@
&__menu-section { &__menu-section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-width: rem(120); min-width: pxToRem(120);
} }
&__menu-section-title { &__menu-section-title {
font-size: map-get($font-sizes-text, 'm'); font-size: map-get($font-sizes-text, 'm');
line-height: rem(24); line-height: pxToRem(24);
color: $neutral-98; color: $neutral-98;
font-weight: bold; font-weight: bold;
} }
@@ -88,7 +88,7 @@
&__menu-item a { &__menu-item a {
color: $neutral-70; color: $neutral-70;
font-size: map-get($font-sizes-text, 's'); font-size: map-get($font-sizes-text, 's');
line-height: rem(21); line-height: pxToRem(21);
text-decoration: none; text-decoration: none;
} }
@@ -119,7 +119,7 @@
&__middle-title { &__middle-title {
font-weight: 500; font-weight: 500;
font-size: map-get($font-sizes-text, 'xl'); font-size: map-get($font-sizes-text, 'xl');
line-height: rem(30); line-height: pxToRem(30);
margin-bottom: $spacer; margin-bottom: $spacer;
color: $neutral-98; color: $neutral-98;
} }
@@ -127,13 +127,13 @@
&__middle-subtitle { &__middle-subtitle {
color: $neutral-70; color: $neutral-70;
font-size: map-get($font-sizes-text, 's'); font-size: map-get($font-sizes-text, 's');
line-height: rem(21); line-height: pxToRem(21);
font-weight: 500; font-weight: 500;
} }
&__bottom { &__bottom {
width: 100%; width: 100%;
padding-top: rem(30); padding-top: pxToRem(30);
padding-bottom: 0; padding-bottom: 0;
display: flex; display: flex;
@@ -156,7 +156,7 @@
color: $neutral-70; color: $neutral-70;
font-weight: 500; font-weight: 500;
font-size: map-get($font-sizes-text, 's'); font-size: map-get($font-sizes-text, 's');
line-height: rem(21); line-height: pxToRem(21);
} }
&__bottom-content a { &__bottom-content a {
@@ -172,8 +172,8 @@
padding-bottom: $spacer * 3; padding-bottom: $spacer * 3;
&__menu { &__menu {
min-width: rem(540); min-width: pxToRem(540);
gap: rem(54); gap: pxToRem(54);
} }
&__menu-section { &__menu-section {
@@ -191,7 +191,7 @@
} }
&__bottom { &__bottom {
padding-bottom: rem(30); padding-bottom: pxToRem(30);
} }
&__bottom-content { &__bottom-content {
@@ -2,5 +2,5 @@
@use '../mixins/get-contacted' as get-contacted; @use '../mixins/get-contacted' as get-contacted;
.get-contacted-with-question { .get-contacted-with-question {
@include get-contacted.base($spacer * 2.5, 0, 0, 0, rem(350)); @include get-contacted.base($spacer * 2.5, 0, 0, 0, pxToRem(350));
} }
@@ -21,7 +21,7 @@
justify-content: center; justify-content: center;
min-width: 100%; min-width: 100%;
min-height: rem(615); min-height: pxToRem(615);
border-radius: 16px; border-radius: 16px;
@@ -33,7 +33,7 @@
&__title { &__title {
font-size: map-get($font-sizes, 4); font-size: map-get($font-sizes, 4);
line-height: rem(48); line-height: pxToRem(48);
color: $neutral-98; color: $neutral-98;
text-align: center; text-align: center;
margin: 0; margin: 0;
@@ -42,7 +42,7 @@
&__subtitle { &__subtitle {
font-size: map-get($font-sizes-text, 'l'); font-size: map-get($font-sizes-text, 'l');
line-height: rem(27); line-height: pxToRem(27);
text-align: center; text-align: center;
color: $neutral-90; color: $neutral-90;
margin-top: $spacer * 1.5; margin-top: $spacer * 1.5;
@@ -54,8 +54,8 @@
position: absolute; position: absolute;
top: $spacer * 1.5; top: $spacer * 1.5;
left: $spacer * 2.5; left: $spacer * 2.5;
width: rem(94); width: pxToRem(94);
height: rem(83); height: pxToRem(83);
background-position: top; background-position: top;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
@@ -65,8 +65,8 @@
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 0; right: 0;
width: rem(281); width: pxToRem(281);
height: rem(151); height: pxToRem(151);
background-repeat: no-repeat; background-repeat: no-repeat;
} }
@@ -74,8 +74,8 @@
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
width: rem(250); width: pxToRem(250);
height: rem(250); height: pxToRem(250);
background-image: url('/img/blurred/blurred-light-2.svg'); background-image: url('/img/blurred/blurred-light-2.svg');
background-position: top; background-position: top;
background-size: cover; background-size: cover;
@@ -101,7 +101,7 @@
padding-bottom: $spacer * 6.5; padding-bottom: $spacer * 6.5;
&__content { &__content {
min-height: rem(165); min-height: pxToRem(165);
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
@@ -109,12 +109,12 @@
&__title { &__title {
font-size: map-get($font-sizes, 3); font-size: map-get($font-sizes, 3);
line-height: rem(57); line-height: pxToRem(57);
max-width: unset; max-width: unset;
} }
&__subtitle { &__subtitle {
max-width: rem(640); max-width: pxToRem(640);
} }
&__overlay-middle { &__overlay-middle {
@@ -15,8 +15,8 @@
&__image { &__image {
width: 100%; width: 100%;
min-height: rem(480); min-height: pxToRem(480);
margin: rem(-142) auto 0; margin: pxToRem(-142) auto 0;
overflow: hidden; overflow: hidden;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
@@ -43,14 +43,14 @@
width: 100%; width: 100%;
margin-bottom: $spacer; margin-bottom: $spacer;
font-size: map-get($font-sizes, 4); font-size: map-get($font-sizes, 4);
line-height: rem(48); line-height: pxToRem(48);
} }
&__subtitle { &__subtitle {
color: $neutral-70; color: $neutral-70;
text-align: center; text-align: center;
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
max-width: 100%; max-width: 100%;
margin: 0 auto $spacer * 1.5; margin: 0 auto $spacer * 1.5;
} }
@@ -65,7 +65,7 @@
} }
&__buttons a { &__buttons a {
min-width: rem(200); min-width: pxToRem(200);
} }
&__stars { &__stars {
@@ -83,16 +83,16 @@
padding-top: calc($spacer / 2); padding-top: calc($spacer / 2);
padding-bottom: calc($spacer / 2); padding-bottom: calc($spacer / 2);
padding-left: rem(20); padding-left: pxToRem(20);
padding-right: rem(20); padding-right: pxToRem(20);
background-color: $neutral-10; background-color: $neutral-10;
transition: bottom 1s ease-in-out; transition: bottom 1s ease-in-out;
} }
&__stars svg { &__stars svg {
max-width: rem(24); max-width: pxToRem(24);
max-height: rem(24); max-height: pxToRem(24);
} }
&__stars-text { &__stars-text {
@@ -100,7 +100,7 @@
margin-right: calc($spacer / 2); margin-right: calc($spacer / 2);
margin-left: calc($spacer / 2); margin-left: calc($spacer / 2);
font-size: map-get($font-sizes-text, 's'); font-size: map-get($font-sizes-text, 's');
line-height: rem(21); line-height: pxToRem(21);
font-weight: 500; font-weight: 500;
} }
@@ -116,10 +116,10 @@
justify-content: center; justify-content: center;
gap: calc($spacer / 4); gap: calc($spacer / 4);
height: rem(25); height: pxToRem(25);
font-size: map-get($font-sizes-text, 's'); font-size: map-get($font-sizes-text, 's');
line-height: rem(21); line-height: pxToRem(21);
} }
@include media-breakpoint-up(xl) { @include media-breakpoint-up(xl) {
@@ -127,18 +127,18 @@
&__content { &__content {
padding: 0; padding: 0;
max-width: rem(920); max-width: pxToRem(920);
} }
&__title { &__title {
font-size: map-get($font-sizes, 1); font-size: map-get($font-sizes, 1);
line-height: rem(76); line-height: pxToRem(76);
} }
&__subtitle { &__subtitle {
font-size: map-get($font-sizes-text, 'xl'); font-size: map-get($font-sizes-text, 'xl');
line-height: rem(30); line-height: pxToRem(30);
max-width: rem(640); max-width: pxToRem(640);
margin: 0 auto $spacer * 2; margin: 0 auto $spacer * 2;
} }
@@ -5,16 +5,16 @@ form.hs-form {
& > fieldset { & > fieldset {
min-width: 100%; min-width: 100%;
margin-bottom: rem(20); margin-bottom: pxToRem(20);
label { label {
margin-bottom: rem(6); margin-bottom: pxToRem(6);
font-size: rem(14); font-size: pxToRem(14);
line-height: rem(21); line-height: pxToRem(21);
} }
legend { legend {
font-size: rem(14); font-size: pxToRem(14);
color: $neutral-60; color: $neutral-60;
} }
@@ -41,7 +41,7 @@ form.hs-form {
&.form-columns-2 { &.form-columns-2 {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: rem(20); gap: pxToRem(20);
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
justify-content: space-between; justify-content: space-between;
@@ -53,7 +53,7 @@ form.hs-form {
float: none; float: none;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
$remValue: rem(10); $remValue: pxToRem(10);
max-width: calc(50% - #{$remValue}); max-width: calc(50% - #{$remValue});
} }
} }
@@ -117,7 +117,7 @@ form.hs-form {
textarea { textarea {
display: block; display: block;
height: rem(77); height: pxToRem(77);
resize: none; resize: none;
} }
@@ -132,7 +132,7 @@ form.hs-form {
content: ''; content: '';
display: block; display: block;
position: absolute; position: absolute;
top: rem(12); top: pxToRem(12);
right: $spacer; right: $spacer;
height: $spacer; height: $spacer;
width: $spacer; width: $spacer;
@@ -147,8 +147,8 @@ form.hs-form {
.legal-consent-container { .legal-consent-container {
p { p {
font-size: rem(12); font-size: pxToRem(12);
line-height: rem(18); line-height: pxToRem(18);
color: $neutral-60; color: $neutral-60;
a { a {
@@ -188,11 +188,11 @@ form.hs-form {
.hs_submit { .hs_submit {
input[type='submit'] { input[type='submit'] {
padding-left: rem(22); padding-left: pxToRem(22);
padding-right: rem(22); padding-right: pxToRem(22);
font-size: map-get($font-sizes-text, 'md'); font-size: map-get($font-sizes-text, 'md');
line-height: rem(24); line-height: pxToRem(24);
} }
} }
@@ -207,6 +207,6 @@ form.hs-form {
.submitted-message { .submitted-message {
color: $success-90; color: $success-90;
font-size: map-get($font-sizes-text, 'md'); font-size: map-get($font-sizes-text, 'md');
line-height: rem(24); line-height: pxToRem(24);
text-align: right; text-align: right;
} }
@@ -22,8 +22,8 @@
&-title { &-title {
margin-bottom: 0; margin-bottom: 0;
font-size: rem(20); font-size: pxToRem(20);
line-height: rem(30); line-height: pxToRem(30);
color: $neutral-20; color: $neutral-20;
} }
@@ -41,7 +41,7 @@
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
gap: rem(30); gap: pxToRem(30);
& > div:nth-of-type(1), & > div:nth-of-type(1),
& > div:nth-of-type(2) { & > div:nth-of-type(2) {
@@ -8,13 +8,13 @@
&__title { &__title {
margin-bottom: $spacer * 2.5; margin-bottom: $spacer * 2.5;
font-size: $spacer * 2; font-size: $spacer * 2;
line-height: rem(38); line-height: pxToRem(38);
text-align: center; text-align: center;
color: $neutral-20; color: $neutral-20;
} }
&__cards { &__cards {
gap: rem(30); gap: pxToRem(30);
margin-bottom: $spacer * 2.5; margin-bottom: $spacer * 2.5;
} }
@@ -31,8 +31,8 @@
&-description { &-description {
margin-bottom: 0; margin-bottom: 0;
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
color: $neutral-20; color: $neutral-20;
} }
} }
@@ -41,8 +41,8 @@
text-align: center; text-align: center;
p { p {
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
color: $neutral-20; color: $neutral-20;
} }
} }
@@ -50,7 +50,7 @@
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
&__title { &__title {
font-size: $spacer * 3; font-size: $spacer * 3;
line-height: rem(57); line-height: pxToRem(57);
margin-bottom: $spacer * 5; margin-bottom: $spacer * 5;
} }
@@ -67,17 +67,17 @@
position: relative; position: relative;
p { p {
font-size: rem(20); font-size: pxToRem(20);
line-height: rem(30); line-height: pxToRem(30);
} }
&:before, &:before,
&:after { &:after {
content: ''; content: '';
position: absolute; position: absolute;
top: rem(22); top: pxToRem(22);
width: rem(166); width: pxToRem(166);
height: rem(1); height: pxToRem(1);
background-color: $neutral-80; background-color: $neutral-80;
} }
@@ -2,5 +2,5 @@
@use '../mixins/get-contacted' as get-contacted; @use '../mixins/get-contacted' as get-contacted;
.hybrid-cloud-get-contacted { .hybrid-cloud-get-contacted {
@include get-contacted.base($spacer * 2.5, 0, 0, $spacer * 4, rem(350)); @include get-contacted.base($spacer * 2.5, 0, 0, $spacer * 4, pxToRem(350));
} }
@@ -23,8 +23,8 @@
& > div { & > div {
gap: $spacer * 0.5; gap: $spacer * 0.5;
padding: rem(4) $spacer; padding: pxToRem(4) $spacer;
border-radius: rem(100); border-radius: pxToRem(100);
background-color: $neutral-20; background-color: $neutral-20;
img { img {
@@ -33,8 +33,8 @@
} }
p { p {
font-size: rem(14); font-size: pxToRem(14);
line-height: rem(21); line-height: pxToRem(21);
color: $neutral-90; color: $neutral-90;
margin-bottom: 0; margin-bottom: 0;
} }
@@ -42,8 +42,8 @@
} }
&__description { &__description {
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
margin-bottom: $spacer * 2; margin-bottom: $spacer * 2;
color: $neutral-70; color: $neutral-70;
} }
@@ -74,12 +74,12 @@
text-align: left; text-align: left;
&__content { &__content {
width: rem(480); width: pxToRem(480);
} }
&__title { &__title {
font-size: $spacer * 4; font-size: $spacer * 4;
line-height: rem(76); line-height: pxToRem(76);
} }
&__features { &__features {
@@ -89,8 +89,8 @@
} }
&__description { &__description {
font-size: rem(20); font-size: pxToRem(20);
line-height: rem(30); line-height: pxToRem(30);
} }
&__buttons { &__buttons {
@@ -103,17 +103,17 @@
} }
&__preview { &__preview {
width: rem(480); width: pxToRem(480);
margin-top: -$spacer * 5; margin-top: -$spacer * 5;
} }
} }
@include media-breakpoint-up(xl) { @include media-breakpoint-up(xl) {
&__content { &__content {
width: rem(500); width: pxToRem(500);
} }
&__preview { &__preview {
width: rem(550); width: pxToRem(550);
} }
} }
} }
@@ -28,9 +28,9 @@
content: ''; content: '';
display: block; display: block;
position: absolute; position: absolute;
left: rem(15); left: pxToRem(15);
bottom: -4px; bottom: -4px;
width: rem(2); width: pxToRem(2);
height: calc(100% - 52px); height: calc(100% - 52px);
background-color: $neutral-40; background-color: $neutral-40;
} }
@@ -43,7 +43,7 @@
position: absolute; position: absolute;
left: -4px; left: -4px;
top: -4.5px; top: -4.5px;
height: rem(45); height: pxToRem(45);
width: $spacer * 2.4; width: $spacer * 2.4;
background-image: url('/img/hybrid-cloud-steps-cube/cube.png'); background-image: url('/img/hybrid-cloud-steps-cube/cube.png');
background-repeat: no-repeat; background-repeat: no-repeat;
@@ -58,7 +58,7 @@
left: -32px; left: -32px;
top: -30px; top: -30px;
width: $spacer * 6.5; width: $spacer * 6.5;
height: rem(108.5); height: pxToRem(108.5);
background-image: url('/img/hybrid-cloud-steps-cube/cube-blur.png'); background-image: url('/img/hybrid-cloud-steps-cube/cube-blur.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
@@ -67,8 +67,8 @@
} }
span { span {
font-size: rem(20); font-size: pxToRem(20);
line-height: rem(30); line-height: pxToRem(30);
color: $neutral-98; color: $neutral-98;
z-index: 2; z-index: 2;
} }
@@ -101,7 +101,7 @@
&__title { &__title {
font-size: $spacer * 3.5; font-size: $spacer * 3.5;
line-height: rem(67); line-height: pxToRem(67);
} }
&__steps { &__steps {
@@ -113,14 +113,14 @@
&:not(:last-of-type) { &:not(:last-of-type) {
&:before { &:before {
bottom: -28px; bottom: -28px;
width: rem(2); width: pxToRem(2);
height: calc(100% - 28px); height: calc(100% - 28px);
} }
} }
&-description { &-description {
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
} }
} }
@@ -7,18 +7,18 @@
&__title { &__title {
font-size: $spacer * 2; font-size: $spacer * 2;
line-height: rem(38); line-height: pxToRem(38);
margin-bottom: $spacer * 1.5; margin-bottom: $spacer * 1.5;
color: $neutral-20; color: $neutral-20;
} }
&__description { &__description {
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
color: $neutral-20; color: $neutral-20;
&:first-of-type { &:first-of-type {
margin-bottom: rem(27); margin-bottom: pxToRem(27);
} }
&:last-of-type { &:last-of-type {
@@ -41,15 +41,15 @@
&__title { &__title {
font-size: $spacer * 3; font-size: $spacer * 3;
line-height: rem(57); line-height: pxToRem(57);
} }
&__description { &__description {
font-size: rem(20); font-size: pxToRem(20);
line-height: rem(30); line-height: pxToRem(30);
&:first-of-type { &:first-of-type {
margin-bottom: rem(30); margin-bottom: pxToRem(30);
} }
} }
} }
@@ -10,7 +10,7 @@
&__title { &__title {
margin: 0 auto $spacer * 2.5; margin: 0 auto $spacer * 2.5;
font-size: $spacer * 1.5; font-size: $spacer * 1.5;
line-height: rem(34); line-height: pxToRem(34);
color: $neutral-20; color: $neutral-20;
text-align: center; text-align: center;
} }
@@ -20,7 +20,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $spacer * 1.5; gap: $spacer * 1.5;
padding: rem(92) 0; padding: pxToRem(92) 0;
} }
&__cards { &__cards {
@@ -35,7 +35,7 @@
gap: $spacer; gap: $spacer;
padding: $spacer 0 $spacer $spacer; padding: $spacer 0 $spacer $spacer;
background-color: $neutral-98; background-color: $neutral-98;
border-radius: rem(12); border-radius: pxToRem(12);
img { img {
width: $spacer * 4; width: $spacer * 4;
@@ -55,7 +55,7 @@
left: 0; left: 0;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: rem(400); height: pxToRem(400);
background-image: url('/img/square-grid.png'); background-image: url('/img/square-grid.png');
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
@@ -67,9 +67,9 @@
padding-bottom: $spacer * 5; padding-bottom: $spacer * 5;
&__title { &__title {
width: rem(920); width: pxToRem(920);
font-size: $spacer * 2; font-size: $spacer * 2;
line-height: rem(38); line-height: pxToRem(38);
} }
&__square-grid-overlay { &__square-grid-overlay {
@@ -8,7 +8,7 @@
&__title { &__title {
margin-bottom: $spacer * 3; margin-bottom: $spacer * 3;
font-size: $spacer * 2; font-size: $spacer * 2;
line-height: rem(38); line-height: pxToRem(38);
text-align: center; text-align: center;
color: $neutral-20; color: $neutral-20;
} }
@@ -19,7 +19,7 @@
&__title { &__title {
font-size: $spacer * 3; font-size: $spacer * 3;
line-height: rem(57); line-height: pxToRem(57);
} }
} }
} }
@@ -14,7 +14,7 @@
&__title { &__title {
font-size: map-get($font-sizes, 4); font-size: map-get($font-sizes, 4);
line-height: rem(48); line-height: pxToRem(48);
text-align: center; text-align: center;
margin-bottom: $spacer * 1.5; margin-bottom: $spacer * 1.5;
max-width: 100%; max-width: 100%;
@@ -24,7 +24,7 @@
&__subtitle { &__subtitle {
color: $neutral-70; color: $neutral-70;
font-size: map-get($font-sizes-text, 'l'); font-size: map-get($font-sizes-text, 'l');
line-height: rem(27); line-height: pxToRem(27);
margin-bottom: $spacer * 1.5; margin-bottom: $spacer * 1.5;
text-align: center; text-align: center;
} }
@@ -41,7 +41,7 @@
&__preview { &__preview {
margin-top: $spacer * 3; margin-top: $spacer * 3;
width: 100%; width: 100%;
height: rem(440); height: pxToRem(440);
background-size: contain; background-size: contain;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@@ -58,29 +58,29 @@
&__title { &__title {
font-size: map-get($font-sizes, 2); font-size: map-get($font-sizes, 2);
line-height: rem(67); line-height: pxToRem(67);
max-width: rem(726); max-width: pxToRem(726);
} }
&__subtitle { &__subtitle {
font-size: map-get($font-sizes-text, 'xl'); font-size: map-get($font-sizes-text, 'xl');
line-height: rem(30); line-height: pxToRem(30);
} }
&__preview { &__preview {
margin-top: $spacer * 5; margin-top: $spacer * 5;
width: rem(920); width: pxToRem(920);
height: rem(440); height: pxToRem(440);
background-image: url('/img/integrations.svg'); background-image: url('/img/integrations.svg');
} }
&__overlay { &__overlay {
display: block; display: block;
width: 100%; width: 100%;
height: rem(240); height: pxToRem(240);
position: absolute; position: absolute;
bottom: rem(-255); bottom: pxToRem(-255);
left: 0; left: 0;
filter: blur(60px); filter: blur(60px);
background: linear-gradient(90deg, #dc244c 7%, #2567eb 30%, #f54c71 50%, #7335f0 70%, #bb3987 100%); background: linear-gradient(90deg, #dc244c 7%, #2567eb 30%, #f54c71 50%, #7335f0 70%, #bb3987 100%);
@@ -8,7 +8,7 @@
&__title { &__title {
font-size: map-get($font-sizes, 4); font-size: map-get($font-sizes, 4);
line-height: rem(48); line-height: pxToRem(48);
text-align: center; text-align: center;
margin-bottom: $spacer * 4; margin-bottom: $spacer * 4;
} }
@@ -21,7 +21,7 @@
&__logo { &__logo {
width: 100%; width: 100%;
min-height: rem(40); min-height: pxToRem(40);
background-position: center; background-position: center;
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
@@ -37,13 +37,13 @@
&__title { &__title {
font-size: map-get($font-sizes, 2); font-size: map-get($font-sizes, 2);
line-height: rem(67); line-height: pxToRem(67);
margin-bottom: $spacer * 2.5; margin-bottom: $spacer * 2.5;
} }
&__logos { &__logos {
align-items: center; align-items: center;
min-height: rem(240); min-height: pxToRem(240);
} }
&__overlay { &__overlay {
@@ -51,7 +51,7 @@
position: absolute; position: absolute;
left: 0; left: 0;
width: 100%; width: 100%;
height: rem(240); height: pxToRem(240);
bottom: $spacer * 7.5; bottom: $spacer * 7.5;
background-image: url('../../img/grid.png'); background-image: url('../../img/grid.png');
background-size: cover; background-size: cover;
@@ -6,16 +6,16 @@
&__title { &__title {
font-size: map-get($font-sizes, 4); font-size: map-get($font-sizes, 4);
line-height: rem(48); line-height: pxToRem(48);
margin-bottom: $spacer * 2.5; margin-bottom: $spacer * 2.5;
} }
&__cards { &__cards {
row-gap: rem(7); row-gap: pxToRem(7);
} }
&__card { &__card {
padding: rem(10); padding: pxToRem(10);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
@@ -28,7 +28,7 @@
aspect-ratio: 0.96; aspect-ratio: 0.96;
background-position: center; background-position: center;
background-size: contain; background-size: contain;
border-radius: rem(6); border-radius: pxToRem(6);
} }
&__card-name { &__card-name {
@@ -36,7 +36,7 @@
font-weight: bold; font-weight: bold;
color: $neutral-20; color: $neutral-20;
text-align: center; text-align: center;
margin-bottom: rem(4); margin-bottom: pxToRem(4);
font-size: map-get($font-sizes-text, md); font-size: map-get($font-sizes-text, md);
} }
@@ -54,12 +54,12 @@
&__title { &__title {
text-align: center; text-align: center;
font-size: map-get($font-sizes, 2); font-size: map-get($font-sizes, 2);
line-height: rem(67); line-height: pxToRem(67);
margin-bottom: $spacer * 4; margin-bottom: $spacer * 4;
} }
&__cards { &__cards {
row-gap: rem(30); row-gap: pxToRem(30);
} }
&__card { &__card {
@@ -1,7 +1,7 @@
@use '../helpers/functions' as *; @use '../helpers/functions' as *;
.link { .link {
$icon-width: rem(20); $icon-width: pxToRem(20);
$icon-height: calc(1em * 0.62); $icon-height: calc(1em * 0.62);
$link-color: $primary-50; $link-color: $primary-50;
$link-font-size: $font-size-l; $link-font-size: $font-size-l;
@@ -7,7 +7,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 2; z-index: 2;
padding-top: rem(52); padding-top: pxToRem(52);
background-color: $neutral-94; background-color: $neutral-94;
display: none; display: none;
gap: $spacer * 3; gap: $spacer * 3;
@@ -19,7 +19,7 @@
} }
&__header { &__header {
padding: 0 rem(20); padding: 0 pxToRem(20);
display: flex; display: flex;
align-items: center; align-items: center;
@@ -29,10 +29,10 @@
&__close { &__close {
outline: none; outline: none;
border: none; border: none;
padding: rem(5); padding: pxToRem(5);
padding-top: rem(7); padding-top: pxToRem(7);
width: rem(40); width: pxToRem(40);
height: rem(40); height: pxToRem(40);
background-color: transparent; background-color: transparent;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -40,8 +40,8 @@
} }
&__close svg { &__close svg {
width: rem(24); width: pxToRem(24);
height: rem(24); height: pxToRem(24);
} }
&__controls { &__controls {
@@ -49,9 +49,9 @@
flex-direction: column; flex-direction: column;
gap: $spacer * 1.5; gap: $spacer * 1.5;
padding-left: rem(20); padding-left: pxToRem(20);
padding-right: rem(20); padding-right: pxToRem(20);
padding-bottom: rem(60); padding-bottom: pxToRem(60);
} }
&__login { &__login {
@@ -71,8 +71,8 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
color: $neutral-20; color: $neutral-20;
@@ -85,8 +85,8 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
min-height: rem(64); min-height: pxToRem(64);
padding: 0 rem(20); padding: 0 pxToRem(20);
} }
&__subitems { &__subitems {
@@ -95,7 +95,7 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
background-color: $neutral-90; background-color: $neutral-90;
padding: $spacer rem(20); padding: $spacer pxToRem(20);
} }
&__subitems a { &__subitems a {
@@ -106,25 +106,25 @@
display: flex; display: flex;
align-items: center; align-items: center;
min-height: rem(40); min-height: pxToRem(40);
font-size: rem(16); font-size: pxToRem(16);
line-height: rem(24); line-height: pxToRem(24);
color: $neutral-20; color: $neutral-20;
} }
&__subitem span { &__subitem span {
width: rem(16); width: pxToRem(16);
height: rem(16); height: pxToRem(16);
margin-right: $spacer; margin-right: $spacer;
} }
&__expand { &__expand {
outline: none; outline: none;
border: none; border: none;
padding: rem(5); padding: pxToRem(5);
width: rem(34); width: pxToRem(34);
height: rem(34); height: pxToRem(34);
background-color: transparent; background-color: transparent;
display: flex; display: flex;
@@ -133,14 +133,14 @@
} }
&__expand svg { &__expand svg {
height: rem(16); height: pxToRem(16);
width: rem(16); width: pxToRem(16);
} }
&__section-link { &__section-link {
padding-top: 0.5rem; padding-top: 0.5rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
margin-bottom: rem(4); margin-bottom: pxToRem(4);
text-transform: uppercase; text-transform: uppercase;
a { a {
line-height: $font-size-s; line-height: $font-size-s;
@@ -18,18 +18,18 @@
flex-wrap: nowrap; flex-wrap: nowrap;
flex-shrink: 0; flex-shrink: 0;
position: relative; position: relative;
padding-top: rem(12); padding-top: pxToRem(12);
padding-bottom: rem(12); padding-bottom: pxToRem(12);
padding-left: rem(20); padding-left: pxToRem(20);
padding-right: rem(20); padding-right: pxToRem(20);
background: linear-gradient(180deg, #090d19, rgba(9, 13, 25, 0)); background: linear-gradient(180deg, #090d19, rgba(9, 13, 25, 0));
z-index: 1; z-index: 1;
&__trigger { &__trigger {
outline: none; outline: none;
border: none; border: none;
width: rem(40); width: pxToRem(40);
height: rem(40); height: pxToRem(40);
padding: 0 8px; padding: 0 8px;
border-radius: 8px; border-radius: 8px;
z-index: 1; z-index: 1;
@@ -68,7 +68,7 @@
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
align-items: flex-start; align-items: flex-start;
padding: rem(24); padding: pxToRem(24);
position: absolute; position: absolute;
border-radius: 12px; border-radius: 12px;
@@ -107,7 +107,7 @@
&__submenu-item { &__submenu-item {
width: 100%; width: 100%;
list-style: none; list-style: none;
margin-bottom: rem(4); margin-bottom: pxToRem(4);
&:last-of-type { &:last-of-type {
margin-bottom: 0; margin-bottom: 0;
} }
@@ -116,7 +116,7 @@
height: 2.5rem; height: 2.5rem;
line-height: 1; line-height: 1;
align-items: center; align-items: center;
border-radius: rem(4); border-radius: pxToRem(4);
color: $neutral-20; color: $neutral-20;
padding: 0.5rem; padding: 0.5rem;
} }
@@ -127,7 +127,7 @@
color: $primary-50; color: $primary-50;
margin-top: 0.3rem; margin-top: 0.3rem;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
margin-right: rem(12); margin-right: pxToRem(12);
} }
&:hover { &:hover {
@@ -140,7 +140,7 @@
&__section-link { &__section-link {
padding: 0.5rem; padding: 0.5rem;
margin-bottom: rem(4); margin-bottom: pxToRem(4);
text-transform: uppercase; text-transform: uppercase;
a { a {
line-height: $font-size-s; line-height: $font-size-s;
@@ -18,9 +18,9 @@
&__link { &__link {
color: $neutral-94; color: $neutral-94;
padding: rem(4) $spacer; padding: pxToRem(4) $spacer;
font-size: $font-size-s; font-size: $font-size-s;
line-height: rem(21); line-height: pxToRem(21);
border-radius: 100px; border-radius: 100px;
background: linear-gradient($neutral-20, $neutral-10); background: linear-gradient($neutral-20, $neutral-10);
display: flex; display: flex;
@@ -31,16 +31,16 @@
&__logo { &__logo {
content: url('../../icons/logo.svg'); content: url('../../icons/logo.svg');
min-width: rem(14); min-width: pxToRem(14);
height: rem(16); height: pxToRem(16);
padding-right: rem(8); padding-right: pxToRem(8);
} }
&__title { &__title {
color: $neutral-20; color: $neutral-20;
text-align: center; text-align: center;
font-size: map-get($font-sizes, 4); font-size: map-get($font-sizes, 4);
line-height: rem(48); line-height: pxToRem(48);
margin: $spacer * 1.5 0 0; margin: $spacer * 1.5 0 0;
} }
@@ -58,17 +58,17 @@
} }
@include media-breakpoint-up(xl) { @include media-breakpoint-up(xl) {
padding: rem(160) 0; padding: pxToRem(160) 0;
&__title { &__title {
max-width: rem(920); max-width: pxToRem(920);
font-size: map-get($font-sizes, 2); font-size: map-get($font-sizes, 2);
line-height: rem(67); line-height: pxToRem(67);
} }
&__overlay { &__overlay {
height: rem(400); height: pxToRem(400);
top: rem(87); top: pxToRem(87);
background-image: url('../../img/mission-background.png'); background-image: url('../../img/mission-background.png');
} }
} }
@@ -16,14 +16,14 @@
&__title { &__title {
font-size: $spacer * 1.5; font-size: $spacer * 1.5;
line-height: rem(34); line-height: pxToRem(34);
color: $neutral-98; color: $neutral-98;
margin-bottom: $spacer * 0.5; margin-bottom: $spacer * 0.5;
} }
&__description { &__description {
font-size: rem(14); font-size: pxToRem(14);
line-height: rem(21); line-height: pxToRem(21);
color: $neutral-70; color: $neutral-70;
margin-bottom: 0; margin-bottom: 0;
} }
@@ -59,18 +59,18 @@
} }
&__text { &__text {
width: rem(381); width: pxToRem(381);
} }
&__form { &__form {
form { form {
flex-direction: row; flex-direction: row;
width: rem(476); width: pxToRem(476);
} }
button, button,
input[type='submit'] { input[type='submit'] {
width: rem(118); width: pxToRem(118);
} }
} }
} }
@@ -3,7 +3,7 @@
.not-found { .not-found {
position: relative; position: relative;
min-height: calc(100vh - 104px); min-height: calc(100vh - 104px);
padding-top: rem(130); padding-top: pxToRem(130);
padding-bottom: $spacer * 5; padding-bottom: $spacer * 5;
text-align: center; text-align: center;
background: url('/img/stars-pattern.png') $neutral-10; background: url('/img/stars-pattern.png') $neutral-10;
@@ -19,8 +19,8 @@
} }
&__description { &__description {
font-size: rem(20); font-size: pxToRem(20);
line-height: rem(30); line-height: pxToRem(30);
color: $neutral-94; color: $neutral-94;
margin-bottom: $spacer * 1.5; margin-bottom: $spacer * 1.5;
} }
@@ -33,7 +33,7 @@
gap: $spacer * 1.5; gap: $spacer * 1.5;
.button { .button {
width: rem(200); width: pxToRem(200);
} }
} }
@@ -43,15 +43,15 @@
left: 0; left: 0;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: rem(200); height: pxToRem(200);
background-image: url('/img/blurred/blurred-light-12.svg'); background-image: url('/img/blurred/blurred-light-12.svg');
background-position: center; background-position: center;
background-size: cover; background-size: cover;
} }
@include media-breakpoint-up(xl) { @include media-breakpoint-up(xl) {
padding-top: rem(120); padding-top: pxToRem(120);
padding-bottom: rem(130); padding-bottom: pxToRem(130);
min-height: calc(100vh - 140px); min-height: calc(100vh - 140px);
&__image { &__image {
@@ -42,8 +42,8 @@
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
width: rem(250); width: pxToRem(250);
height: rem(250); height: pxToRem(250);
background-image: url('/img/blurred/blurred-light-9.png'); background-image: url('/img/blurred/blurred-light-9.png');
background-position: top; background-position: top;
background-size: cover; background-size: cover;
@@ -51,7 +51,7 @@
&__title { &__title {
font-size: map-get($font-sizes, 5); font-size: map-get($font-sizes, 5);
line-height: rem(38); line-height: pxToRem(38);
color: $neutral-98; color: $neutral-98;
text-align: center; text-align: center;
margin: 0; margin: 0;
@@ -60,7 +60,7 @@
&__subtitle { &__subtitle {
font-size: map-get($font-sizes-text, 'm'); font-size: map-get($font-sizes-text, 'm');
line-height: rem(24); line-height: pxToRem(24);
text-align: center; text-align: center;
color: $neutral-80; color: $neutral-80;
margin-top: $spacer; margin-top: $spacer;
@@ -70,7 +70,7 @@
&__image { &__image {
width: 100%; width: 100%;
min-height: rem(240); min-height: pxToRem(240);
background-size: contain; background-size: contain;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@@ -83,14 +83,14 @@
&__content { &__content {
flex-direction: row; flex-direction: row;
padding-top: rem(30); padding-top: pxToRem(30);
padding-bottom: rem(30); padding-bottom: pxToRem(30);
padding-left: $spacer * 4; padding-left: $spacer * 4;
padding-right: 0; padding-right: 0;
} }
&__summary { &__summary {
min-width: rem(640); min-width: pxToRem(640);
align-items: flex-start; align-items: flex-start;
} }
@@ -99,11 +99,11 @@
} }
&__subtitle { &__subtitle {
max-width: rem(640); max-width: pxToRem(640);
} }
&__image { &__image {
max-width: rem(300); max-width: pxToRem(300);
} }
} }
} }
@@ -11,7 +11,7 @@
&__title { &__title {
font-size: map-get($font-sizes, 2); font-size: map-get($font-sizes, 2);
line-height: rem(67); line-height: pxToRem(67);
text-align: center; text-align: center;
color: $neutral-20; color: $neutral-20;
margin: 0; margin: 0;
@@ -19,14 +19,14 @@
&__subtitle { &__subtitle {
font-size: map-get($font-sizes, 6); font-size: map-get($font-sizes, 6);
line-height: rem(34); line-height: pxToRem(34);
margin-bottom: $spacer * 1.5; margin-bottom: $spacer * 1.5;
color: $neutral-20; color: $neutral-20;
} }
&__extra-title { &__extra-title {
font-size: map-get($font-sizes, 6); font-size: map-get($font-sizes, 6);
line-height: rem(34); line-height: pxToRem(34);
margin-bottom: $spacer * 1.5; margin-bottom: $spacer * 1.5;
color: $neutral-20; color: $neutral-20;
} }
@@ -39,7 +39,7 @@
&__image { &__image {
height: 100%; height: 100%;
min-height: rem(332); min-height: pxToRem(332);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
@@ -74,23 +74,23 @@
} }
&__title { &__title {
font-size: rem(80); font-size: pxToRem(80);
line-height: rem(96); line-height: pxToRem(96);
} }
&__subtitle { &__subtitle {
font-size: rem(40); font-size: pxToRem(40);
line-height: rem(48); line-height: pxToRem(48);
max-width: rem(475); max-width: pxToRem(475);
} }
&__content { &__content {
max-width: rem(475); max-width: pxToRem(475);
font-size: map-get($font-sizes-text, 'xl'); font-size: map-get($font-sizes-text, 'xl');
} }
&__image { &__image {
min-height: rem(524); min-height: pxToRem(524);
} }
&__date { &__date {
@@ -8,7 +8,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: rem(4); gap: pxToRem(4);
margin-bottom: 0; margin-bottom: 0;
padding-left: 0; padding-left: 0;
} }
@@ -34,7 +34,7 @@
&.active { &.active {
background-color: $primary-50; background-color: $primary-50;
border-radius: rem(10); border-radius: pxToRem(10);
a { a {
color: $neutral-100; color: $neutral-100;
@@ -10,8 +10,8 @@
100%, 100%,
$spacer * 3, $spacer * 3,
$spacer * 2, $spacer * 2,
rem(57), pxToRem(57),
rem(38) pxToRem(38)
); );
&__title { &__title {
@@ -14,8 +14,8 @@
&__description { &__description {
margin-bottom: $spacer; margin-bottom: $spacer;
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
color: $neutral-30; color: $neutral-30;
} }
@@ -24,12 +24,12 @@
&__title { &__title {
font-size: $spacer * 3.5; font-size: $spacer * 3.5;
line-height: rem(67); line-height: pxToRem(67);
} }
&__description { &__description {
font-size: rem(20); font-size: pxToRem(20);
line-height: rem(30); line-height: pxToRem(30);
} }
} }
} }
@@ -24,7 +24,7 @@
display: block; display: block;
margin-left: auto; margin-left: auto;
width: 100%; width: 100%;
max-width: rem(560); max-width: pxToRem(560);
} }
&__image-mobile { &__image-mobile {
@@ -2,5 +2,5 @@
@use '../mixins/get-contacted' as get-contacted; @use '../mixins/get-contacted' as get-contacted;
.partners-get-contacted { .partners-get-contacted {
@include get-contacted.base(0, 0, $spacer * 7.5, $spacer * 4, rem(350)); @include get-contacted.base(0, 0, $spacer * 7.5, $spacer * 4, pxToRem(350));
} }
@@ -16,8 +16,8 @@
} }
&__description { &__description {
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
color: $neutral-70; color: $neutral-70;
margin: 0 auto $spacer * 3; margin: 0 auto $spacer * 3;
} }
@@ -40,7 +40,7 @@
left: 0; left: 0;
bottom: -30px; bottom: -30px;
width: 100%; width: 100%;
height: rem(240); height: pxToRem(240);
background-image: url('/img/blurred/blurred-light-14.svg'); background-image: url('/img/blurred/blurred-light-14.svg');
background-position: center; background-position: center;
background-size: cover; background-size: cover;
@@ -52,19 +52,19 @@
&__title { &__title {
font-size: $spacer * 4; font-size: $spacer * 4;
line-height: rem(76); line-height: pxToRem(76);
} }
&__description { &__description {
font-size: rem(20); font-size: pxToRem(20);
line-height: rem(30); line-height: pxToRem(30);
max-width: rem(730); max-width: pxToRem(730);
} }
&__image { &__image {
display: block; display: block;
width: 100%; width: 100%;
max-width: rem(1302); max-width: pxToRem(1302);
padding: 0 $spacer * 1.5; padding: 0 $spacer * 1.5;
margin: 0 auto; margin: 0 auto;
} }
@@ -32,15 +32,15 @@
} }
&-title { &-title {
font-size: rem(20); font-size: pxToRem(20);
line-height: rem(30); line-height: pxToRem(30);
margin-bottom: $spacer * 0.5; margin-bottom: $spacer * 0.5;
color: $neutral-98; color: $neutral-98;
} }
&-description { &-description {
font-size: rem(14); font-size: pxToRem(14);
line-height: rem(21); line-height: pxToRem(21);
margin-bottom: 0; margin-bottom: 0;
color: $neutral-70; color: $neutral-70;
} }
@@ -56,13 +56,13 @@
&__title { &__title {
font-size: $spacer * 3.5; font-size: $spacer * 3.5;
line-height: rem(67); line-height: pxToRem(67);
margin-bottom: 0; margin-bottom: 0;
} }
&__description { &__description {
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
} }
} }
} }
@@ -10,15 +10,15 @@
&__title { &__title {
margin-bottom: $spacer * 1.5; margin-bottom: $spacer * 1.5;
font-size: $spacer * 2; font-size: $spacer * 2;
line-height: rem(38); line-height: pxToRem(38);
color: $neutral-20; color: $neutral-20;
text-align: center; text-align: center;
} }
&__description { &__description {
margin: 0 auto $spacer * 5; margin: 0 auto $spacer * 5;
font-size: rem(20); font-size: pxToRem(20);
line-height: rem(30); line-height: pxToRem(30);
color: $neutral-20; color: $neutral-20;
text-align: center; text-align: center;
} }
@@ -38,10 +38,10 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: $spacer * 0.5 rem(60); padding: $spacer * 0.5 pxToRem(60);
background-color: $neutral-98; background-color: $neutral-98;
border-radius: rem(12); border-radius: pxToRem(12);
border: rem(1) solid $neutral-90; border: pxToRem(1) solid $neutral-90;
img { img {
width: $spacer * 7.5; width: $spacer * 7.5;
@@ -56,7 +56,7 @@
left: 0; left: 0;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: rem(240); height: pxToRem(240);
background-image: url('/img/square-grid-small.svg'); background-image: url('/img/square-grid-small.svg');
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
@@ -69,11 +69,11 @@
&__title { &__title {
font-size: $spacer * 3; font-size: $spacer * 3;
line-height: rem(57); line-height: pxToRem(57);
} }
&__description { &__description {
max-width: rem(730); max-width: pxToRem(730);
} }
&__square-grid-overlay { &__square-grid-overlay {
@@ -4,20 +4,20 @@
position: relative; position: relative;
height: 100%; height: 100%;
width: 100%; width: 100%;
padding: rem(47) $spacer * 2 $spacer * 3 $spacer * 2; padding: pxToRem(47) $spacer * 2 $spacer * 3 $spacer * 2;
border-radius: rem(12); border-radius: pxToRem(12);
border-top: rem(1) solid $neutral-40; border-top: pxToRem(1) solid $neutral-40;
background: linear-gradient($neutral-20, #0e1424); background: linear-gradient($neutral-20, #0e1424);
color: $neutral-80; color: $neutral-80;
z-index: 1; z-index: 1;
&.active, &.active,
&:hover { &:hover {
padding: rem(47) rem(31); padding: pxToRem(47) pxToRem(31);
border: rem(1) solid $primary-40; border: pxToRem(1) solid $primary-40;
.pricing-door__popular { .pricing-door__popular {
left: rem(31); left: pxToRem(31);
} }
} }
@@ -25,11 +25,11 @@
position: absolute; position: absolute;
top: -11px; top: -11px;
left: $spacer * 2; left: $spacer * 2;
padding: rem(2) rem(12); padding: pxToRem(2) pxToRem(12);
font-size: rem(12); font-size: pxToRem(12);
line-height: rem(18); line-height: pxToRem(18);
text-transform: uppercase; text-transform: uppercase;
border-radius: rem(6); border-radius: pxToRem(6);
background-color: $primary-50; background-color: $primary-50;
color: $neutral-98; color: $neutral-98;
} }
@@ -38,12 +38,12 @@
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
width: rem(220); width: pxToRem(220);
height: rem(192); height: pxToRem(192);
background-image: url('/img/blurred/blurred-light-9.png'); background-image: url('/img/blurred/blurred-light-9.png');
background-position: top; background-position: top;
background-size: cover; background-size: cover;
border-radius: 0 rem(12) 0 0; border-radius: 0 pxToRem(12) 0 0;
} }
&__title { &__title {
@@ -57,8 +57,8 @@
} }
&__description { &__description {
font-size: rem(14); font-size: pxToRem(14);
line-height: rem(21); line-height: pxToRem(21);
margin-bottom: $spacer * 1.5; margin-bottom: $spacer * 1.5;
} }
@@ -69,14 +69,14 @@
&__feature { &__feature {
padding-top: $spacer; padding-top: $spacer;
border-top: rem(1) solid $neutral-40; border-top: pxToRem(1) solid $neutral-40;
&-description { &-description {
margin-bottom: $spacer * 1.5; margin-bottom: $spacer * 1.5;
a { a {
color: $neutral-80; color: $neutral-80;
border-bottom: rem(1) solid $neutral-80; border-bottom: pxToRem(1) solid $neutral-80;
} }
} }
@@ -90,14 +90,14 @@
position: relative; position: relative;
margin-bottom: 0; margin-bottom: 0;
padding-left: $spacer * 1.5; padding-left: $spacer * 1.5;
font-size: rem(14); font-size: pxToRem(14);
line-height: rem(21); line-height: pxToRem(21);
&:before { &:before {
content: (''); content: ('');
display: block; display: block;
position: absolute; position: absolute;
top: rem(4); top: pxToRem(4);
left: 0; left: 0;
height: $spacer; height: $spacer;
width: $spacer; width: $spacer;
@@ -113,14 +113,14 @@
align-items: flex-start; align-items: flex-start;
gap: $spacer * 0.5; gap: $spacer * 0.5;
margin-bottom: 0; margin-bottom: 0;
font-size: rem(14); font-size: pxToRem(14);
line-height: rem(21); line-height: pxToRem(21);
span { span {
display: block; display: block;
width: $spacer; width: $spacer;
font-size: rem(20); font-size: pxToRem(20);
line-height: rem(30); line-height: pxToRem(30);
text-align: center; text-align: center;
color: $secondary-blue-50; color: $secondary-blue-50;
} }
@@ -33,8 +33,8 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
height: rem(1); height: pxToRem(1);
width: rem(920); width: pxToRem(920);
margin: 0 auto; margin: 0 auto;
background-color: $neutral-80; background-color: $neutral-80;
} }
@@ -43,21 +43,21 @@
&__title { &__title {
position: absolute; position: absolute;
top: $spacer * 4; top: $spacer * 4;
left: rem(12); left: pxToRem(12);
width: rem(400); width: pxToRem(400);
} }
&__image { &__image {
display: block; display: block;
width: rem(553); width: pxToRem(553);
margin: 0 auto; margin: 0 auto;
} }
&__description { &__description {
position: absolute; position: absolute;
bottom: $spacer * 4; bottom: $spacer * 4;
right: rem(12); right: pxToRem(12);
width: rem(361); width: pxToRem(361);
} }
} }
} }
@@ -2,5 +2,5 @@
@use '../mixins/get-contacted' as get-contacted; @use '../mixins/get-contacted' as get-contacted;
.private-cloud-get-contacted { .private-cloud-get-contacted {
@include get-contacted.base($spacer * 3.5, $spacer * 4, $spacer * 7.5, $spacer * 4, rem(400)); @include get-contacted.base($spacer * 3.5, $spacer * 4, $spacer * 7.5, $spacer * 4, pxToRem(400));
} }
@@ -12,8 +12,8 @@
} }
&__description { &__description {
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
color: $neutral-30; color: $neutral-30;
margin-bottom: $spacer * 1.5; margin-bottom: $spacer * 1.5;
} }
@@ -26,19 +26,19 @@
padding-top: $spacer * 7.5; padding-top: $spacer * 7.5;
&__title { &__title {
width: rem(540); width: pxToRem(540);
font-size: $spacer * 3.5; font-size: $spacer * 3.5;
line-height: rem(67); line-height: pxToRem(67);
margin-bottom: 0; margin-bottom: 0;
} }
&__content { &__content {
width: rem(465); width: pxToRem(465);
} }
&__description { &__description {
font-size: rem(20); font-size: pxToRem(20);
line-height: rem(30); line-height: pxToRem(30);
} }
} }
} }
@@ -17,8 +17,8 @@
} }
&__subtitle { &__subtitle {
font-size: rem(20); font-size: pxToRem(20);
line-height: rem(30); line-height: pxToRem(30);
color: $neutral-98; color: $neutral-98;
margin-bottom: 0; margin-bottom: 0;
} }
@@ -29,7 +29,7 @@
left: 0; left: 0;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: rem(176); height: pxToRem(176);
background-image: url('/img/blurred/blurred-light-11.png'); background-image: url('/img/blurred/blurred-light-11.png');
background-position: center; background-position: center;
background-size: cover; background-size: cover;
@@ -42,12 +42,12 @@
&__title { &__title {
font-size: $spacer * 4; font-size: $spacer * 4;
line-height: rem(76); line-height: pxToRem(76);
} }
&__subtitle { &__subtitle {
font-size: $spacer * 2; font-size: $spacer * 2;
line-height: rem(38); line-height: pxToRem(38);
} }
} }
} }
@@ -33,7 +33,7 @@
i { i {
position: absolute; position: absolute;
top: rem(12); top: pxToRem(12);
right: $spacer; right: $spacer;
width: $spacer; width: $spacer;
height: $spacer; height: $spacer;
@@ -57,7 +57,7 @@
h5 { h5 {
font-size: $spacer * 2; font-size: $spacer * 2;
line-height: rem(38); line-height: pxToRem(38);
color: $neutral-20; color: $neutral-20;
margin-bottom: $spacer; margin-bottom: $spacer;
} }
@@ -71,12 +71,12 @@
&-secondary { &-secondary {
.post { .post {
padding: rem(18) 0 rem(20); padding: pxToRem(18) 0 pxToRem(20);
border-bottom: rem(1) solid $neutral-90; border-bottom: pxToRem(1) solid $neutral-90;
&:first-of-type { &:first-of-type {
padding-top: rem(20); padding-top: pxToRem(20);
border-top: rem(1) solid $neutral-90; border-top: pxToRem(1) solid $neutral-90;
} }
} }
@@ -97,14 +97,14 @@
&__articles { &__articles {
flex-direction: row; flex-direction: row;
gap: rem(30); gap: pxToRem(30);
&-main { &-main {
width: calc(100% - 476px); width: calc(100% - 476px);
} }
&-secondary { &-secondary {
width: rem(446); width: pxToRem(446);
.post { .post {
&:first-of-type { &:first-of-type {
@@ -119,13 +119,13 @@
@include media-breakpoint-up(xl) { @include media-breakpoint-up(xl) {
&__title { &__title {
font-size: $spacer * 3.5; font-size: $spacer * 3.5;
line-height: rem(67); line-height: pxToRem(67);
margin-bottom: 0; margin-bottom: 0;
} }
&__form { &__form {
&-search-block { &-search-block {
width: rem(534); width: pxToRem(534);
margin-left: auto; margin-left: auto;
} }
} }
@@ -15,8 +15,8 @@
} }
&__description { &__description {
font-size: rem(20); font-size: pxToRem(20);
line-height: rem(30); line-height: pxToRem(30);
color: $neutral-70; color: $neutral-70;
margin-bottom: $spacer * 1.5; margin-bottom: $spacer * 1.5;
} }
@@ -41,7 +41,7 @@
left: 0; left: 0;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: rem(176); height: pxToRem(176);
background-image: url('/img/blurred/blurred-light-11.png'); background-image: url('/img/blurred/blurred-light-11.png');
background-position: center; background-position: center;
background-size: cover; background-size: cover;
@@ -54,7 +54,7 @@
&__title { &__title {
font-size: $spacer * 4; font-size: $spacer * 4;
line-height: rem(76); line-height: pxToRem(76);
} }
&__form { &__form {
@@ -10,7 +10,7 @@
& > div:nth-of-type(1), & > div:nth-of-type(1),
& > div:nth-of-type(3) { & > div:nth-of-type(3) {
img { img {
max-width: rem(255); max-width: pxToRem(255);
} }
} }
} }
@@ -20,8 +20,8 @@
&-title { &-title {
font-size: $spacer * 1.5; font-size: $spacer * 1.5;
line-height: rem(34); line-height: pxToRem(34);
margin-bottom: rem(12); margin-bottom: pxToRem(12);
color: $neutral-20; color: $neutral-20;
} }
@@ -36,7 +36,7 @@
} }
a { a {
margin-top: rem(12); margin-top: pxToRem(12);
} }
} }
@@ -77,7 +77,7 @@
} }
a { a {
margin-top: rem(12); margin-top: pxToRem(12);
} }
} }
} }
@@ -18,8 +18,8 @@
content: (''); content: ('');
display: block; display: block;
position: absolute; position: absolute;
top: rem(25); top: pxToRem(25);
height: rem(1); height: pxToRem(1);
width: calc((100% - 820px) / 2); width: calc((100% - 820px) / 2);
background-color: $neutral-90; background-color: $neutral-90;
} }
@@ -16,8 +16,8 @@
} }
&__description { &__description {
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
margin-bottom: $spacer * 2; margin-bottom: $spacer * 2;
color: $neutral-70; color: $neutral-70;
} }
@@ -41,8 +41,8 @@
justify-content: center; justify-content: center;
gap: $spacer * 0.5; gap: $spacer * 0.5;
margin-bottom: $spacer * 1.5; margin-bottom: $spacer * 1.5;
padding: rem(4) $spacer; padding: pxToRem(4) $spacer;
border-radius: rem(100); border-radius: pxToRem(100);
background-color: $neutral-20; background-color: $neutral-20;
img { img {
@@ -52,8 +52,8 @@
p { p {
margin-bottom: 0; margin-bottom: 0;
font-size: rem(14); font-size: pxToRem(14);
line-height: rem(21); line-height: pxToRem(21);
color: $neutral-90; color: $neutral-90;
} }
} }
@@ -64,7 +64,7 @@
left: 0; left: 0;
bottom: -9px; bottom: -9px;
width: 100%; width: 100%;
height: rem(114); height: pxToRem(114);
background-image: url('/img/blurred/blurred-light-10.png'); background-image: url('/img/blurred/blurred-light-10.png');
background-position: center; background-position: center;
background-size: cover; background-size: cover;
@@ -75,13 +75,13 @@
&__title { &__title {
font-size: $spacer * 4; font-size: $spacer * 4;
line-height: rem(71); line-height: pxToRem(71);
} }
&__description { &__description {
max-width: rem(730); max-width: pxToRem(730);
font-size: rem(20); font-size: pxToRem(20);
line-height: rem(30); line-height: pxToRem(30);
margin: 0 auto $spacer * 2 auto; margin: 0 auto $spacer * 2 auto;
} }
@@ -7,10 +7,10 @@
$spacer * 4, $spacer * 4,
$spacer * 7.5, $spacer * 7.5,
$spacer * 4, $spacer * 4,
rem(728), pxToRem(728),
$spacer * 3.5, $spacer * 3.5,
$spacer * 2.5, $spacer * 2.5,
rem(67), pxToRem(67),
$spacer * 3 $spacer * 3
); );
} }
@@ -24,16 +24,16 @@
} }
&-title { &-title {
margin-bottom: rem(12); margin-bottom: pxToRem(12);
font-size: $spacer * 1.5; font-size: $spacer * 1.5;
line-height: rem(34); line-height: pxToRem(34);
color: $neutral-20; color: $neutral-20;
} }
&-description { &-description {
margin-bottom: 0; margin-bottom: 0;
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
color: $neutral-40; color: $neutral-40;
strong, b { strong, b {
@@ -45,7 +45,7 @@
&-image { &-image {
align-self: flex-end; align-self: flex-end;
width: 100%; width: 100%;
max-width: rem(540); max-width: pxToRem(540);
margin-right: -24px; margin-right: -24px;
} }
} }
@@ -58,10 +58,10 @@
overflow: hidden; overflow: hidden;
&-title { &-title {
margin-bottom: rem(12); margin-bottom: pxToRem(12);
padding: 0 $spacer * 1.5; padding: 0 $spacer * 1.5;
font-size: $spacer * 1.5; font-size: $spacer * 1.5;
line-height: rem(34); line-height: pxToRem(34);
} }
&-description { &-description {
@@ -83,10 +83,10 @@
} }
&__description { &__description {
max-width: rem(730); max-width: pxToRem(730);
margin: $spacer * 5 auto $spacer; margin: $spacer * 5 auto $spacer;
font-size: rem(20); font-size: pxToRem(20);
line-height: rem(30); line-height: pxToRem(30);
color: $neutral-20; color: $neutral-20;
text-align: center; text-align: center;
} }
@@ -97,18 +97,18 @@
&__title { &__title {
font-size: $spacer * 3.5; font-size: $spacer * 3.5;
line-height: rem(67); line-height: pxToRem(67);
text-align: center; text-align: center;
} }
&__main-card { &__main-card {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
height: rem(400); height: pxToRem(400);
padding-top: 0; padding-top: 0;
&-block { &-block {
width: rem(440); width: pxToRem(440);
padding: 0 0 0 $spacer * 3; padding: 0 0 0 $spacer * 3;
} }
@@ -124,20 +124,20 @@
} }
&__card { &__card {
height: rem(400); height: pxToRem(400);
padding-top: $spacer * 3; padding-top: $spacer * 3;
&-title { &-title {
padding: 0 $spacer * 4 0 $spacer * 3; padding: 0 $spacer * 4 0 $spacer * 3;
font-size: $spacer * 2; font-size: $spacer * 2;
line-height: rem(38); line-height: pxToRem(38);
} }
&-description { &-description {
margin-bottom: 0; margin-bottom: 0;
padding: 0 $spacer * 4 0 $spacer * 3; padding: 0 $spacer * 4 0 $spacer * 3;
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
} }
&-image { &-image {
@@ -154,9 +154,9 @@
content: ''; content: '';
display: block; display: block;
position: absolute; position: absolute;
top: rem(102); top: pxToRem(102);
width: calc((100% - 778px) / 2); width: calc((100% - 778px) / 2);
height: rem(1); height: pxToRem(1);
background-color: $neutral-80; background-color: $neutral-80;
} }
@@ -172,7 +172,7 @@
@include media-breakpoint-up(xl) { @include media-breakpoint-up(xl) {
&__card { &__card {
height: rem(360); height: pxToRem(360);
} }
} }
} }
@@ -14,18 +14,18 @@
} }
.accordion { .accordion {
max-width: rem(800); max-width: pxToRem(800);
margin: 0 auto; margin: 0 auto;
border-top: rem(1) solid $neutral-80; border-top: pxToRem(1) solid $neutral-80;
&__item { &__item {
border-bottom: rem(1) solid $neutral-80; border-bottom: pxToRem(1) solid $neutral-80;
&-header { &-header {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
height: rem(98); height: pxToRem(98);
margin-bottom: 0; margin-bottom: 0;
padding: 0 $spacer * 3 0 0; padding: 0 $spacer * 3 0 0;
color: $neutral-20; color: $neutral-20;
@@ -36,7 +36,7 @@
display: block; display: block;
position: absolute; position: absolute;
right: 0; right: 0;
top: rem(37); top: pxToRem(37);
height: $spacer * 1.5; height: $spacer * 1.5;
width: $spacer * 1.5; width: $spacer * 1.5;
background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.78711V22.7871' stroke='%232F6FF0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22 12.7871H2' stroke='%232F6FF0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.78711V22.7871' stroke='%232F6FF0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22 12.7871H2' stroke='%232F6FF0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
@@ -48,8 +48,8 @@
&-body { &-body {
padding-right: $spacer * 1.5; padding-right: $spacer * 1.5;
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
color: $neutral-40; color: $neutral-40;
max-height: 0; max-height: 0;
overflow: hidden; overflow: hidden;
@@ -75,7 +75,7 @@
&__title { &__title {
margin-bottom: $spacer * 5; margin-bottom: $spacer * 5;
font-size: $spacer * 3.5; font-size: $spacer * 3.5;
line-height: rem(67); line-height: pxToRem(67);
} }
.accordion { .accordion {
@@ -14,27 +14,27 @@
} }
.contact-form { .contact-form {
max-width: rem(720); max-width: pxToRem(720);
margin: 0 auto; margin: 0 auto;
&__inputs { &__inputs {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
gap: rem(20); gap: pxToRem(20);
margin: $spacer * 2 0; margin: $spacer * 2 0;
&-block { &-block {
width: 100%; width: 100%;
label { label {
margin-bottom: rem(6); margin-bottom: pxToRem(6);
font-size: rem(14); font-size: pxToRem(14);
line-height: rem(21); line-height: pxToRem(21);
} }
textarea { textarea {
height: rem(77); height: pxToRem(77);
resize: none; resize: none;
} }
} }
@@ -43,8 +43,8 @@
&__footer { &__footer {
p { p {
margin-bottom: $spacer * 1.5; margin-bottom: $spacer * 1.5;
font-size: rem(12); font-size: pxToRem(12);
line-height: rem(18); line-height: pxToRem(18);
color: $neutral-60; color: $neutral-60;
a { a {
@@ -62,12 +62,12 @@
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
width: rem(210); width: pxToRem(210);
height: rem(210); height: pxToRem(210);
background-image: url('/img/blurred/blurred-light-15.svg'); background-image: url('/img/blurred/blurred-light-15.svg');
background-position: top; background-position: top;
background-size: cover; background-size: cover;
border-radius: 0 rem(12) 0 0; border-radius: 0 pxToRem(12) 0 0;
} }
} }
@@ -77,7 +77,7 @@
&__title { &__title {
font-size: $spacer * 3.5; font-size: $spacer * 3.5;
line-height: rem(67); line-height: pxToRem(67);
} }
.contact-form { .contact-form {
@@ -95,7 +95,7 @@
justify-content: space-between; justify-content: space-between;
p { p {
width: rem(360); width: pxToRem(360);
} }
button { button {
@@ -24,7 +24,7 @@
position: relative; position: relative;
display: flex; display: flex;
margin: 0 auto $spacer * 1.5; margin: 0 auto $spacer * 1.5;
width: rem(200); width: pxToRem(200);
z-index: 1; z-index: 1;
} }
@@ -35,7 +35,7 @@
&__image-mobile { &__image-mobile {
display: block; display: block;
width: 100%; width: 100%;
max-width: rem(730); max-width: pxToRem(730);
margin: 0 auto; margin: 0 auto;
} }
@@ -46,7 +46,7 @@
left: 0; left: 0;
bottom: -10px; bottom: -10px;
width: 100%; width: 100%;
height: rem(200); height: pxToRem(200);
background-image: url('/img/blurred/blurred-light-12.svg'); background-image: url('/img/blurred/blurred-light-12.svg');
background-position: center; background-position: center;
background-size: cover; background-size: cover;
@@ -57,14 +57,14 @@
&__title { &__title {
font-size: $spacer * 4; font-size: $spacer * 4;
line-height: rem(76); line-height: pxToRem(76);
} }
&__description { &__description {
position: relative; position: relative;
max-width: rem(730); max-width: pxToRem(730);
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
z-index: 1; z-index: 1;
} }
@@ -75,7 +75,7 @@
&__image { &__image {
display: block; display: block;
width: 100%; width: 100%;
max-width: rem(1288); max-width: pxToRem(1288);
margin: -114px auto 0; margin: -114px auto 0;
} }
@@ -11,7 +11,7 @@
&__title { &__title {
font-size: $spacer * 2; font-size: $spacer * 2;
line-height: rem(38); line-height: pxToRem(38);
margin-bottom: $spacer; margin-bottom: $spacer;
color: $neutral-20; color: $neutral-20;
} }
@@ -19,9 +19,9 @@
&__about { &__about {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: rem(6); gap: pxToRem(6);
font-size: rem(14); font-size: pxToRem(14);
line-height: rem(21); line-height: pxToRem(21);
color: $neutral-50; color: $neutral-50;
margin-bottom: $spacer * 2.5; margin-bottom: $spacer * 2.5;
@@ -62,25 +62,25 @@
h1 { h1 {
font-size: $spacer * 2; font-size: $spacer * 2;
line-height: rem(37); line-height: pxToRem(37);
margin-bottom: $spacer; margin-bottom: $spacer;
} }
h2 { h2 {
font-size: $spacer * 1.5; font-size: $spacer * 1.5;
line-height: rem(34); line-height: pxToRem(34);
margin-bottom: $spacer; margin-bottom: $spacer;
} }
h3 { h3 {
font-size: rem(20); font-size: pxToRem(20);
line-height: rem(30); line-height: pxToRem(30);
margin-bottom: $spacer; margin-bottom: $spacer;
} }
h4 { h4 {
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
margin-bottom: $spacer; margin-bottom: $spacer;
} }
@@ -97,7 +97,7 @@
} }
blockquote { blockquote {
padding: rem(32) rem(40) 1px; padding: pxToRem(32) pxToRem(40) 1px;
border-radius: $spacer * 0.5; border-radius: $spacer * 0.5;
background: linear-gradient(180deg, #161e33 0%, #0e1424 100%); background: linear-gradient(180deg, #161e33 0%, #0e1424 100%);
color: $neutral-98; color: $neutral-98;
@@ -105,7 +105,7 @@
details { details {
summary { summary {
font-size: rem(18); font-size: pxToRem(18);
cursor: pointer; cursor: pointer;
margin-bottom: $spacer * 2; margin-bottom: $spacer * 2;
} }
@@ -135,7 +135,7 @@
&__title { &__title {
font-size: $spacer * 3.5; font-size: $spacer * 3.5;
line-height: rem(67); line-height: pxToRem(67);
} }
&__body { &__body {
@@ -150,8 +150,8 @@
p, p,
li { li {
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
} }
h1:not(:first-child) { h1:not(:first-child) {
@@ -174,7 +174,7 @@
} }
h3 { h3 {
font-size: $spacer * 2; font-size: $spacer * 2;
line-height: rem(38); line-height: pxToRem(38);
} }
h4:not(:first-child) { h4:not(:first-child) {
@@ -183,7 +183,7 @@
h4 { h4 {
padding-top: $spacer * 2; padding-top: $spacer * 2;
font-size: $spacer * 1.5; font-size: $spacer * 1.5;
line-height: rem(34); line-height: pxToRem(34);
} }
iframe { iframe {
@@ -7,8 +7,8 @@
text-align: center; text-align: center;
&__title { &__title {
font-size: rem(20); font-size: pxToRem(20);
line-height: rem(30); line-height: pxToRem(30);
margin-bottom: 0; margin-bottom: 0;
} }
@@ -27,8 +27,8 @@
content: (''); content: ('');
display: block; display: block;
position: absolute; position: absolute;
top: rem(29.5); top: pxToRem(29.5);
height: rem(1); height: pxToRem(1);
width: calc((100% - 453px) / 2); width: calc((100% - 453px) / 2);
background-color: $neutral-30; background-color: $neutral-30;
} }
@@ -8,7 +8,7 @@
&__doors { &__doors {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: rem(30); gap: pxToRem(30);
width: 100%; width: 100%;
} }
@@ -22,8 +22,8 @@
} }
&__door { &__door {
width: rem(400); width: pxToRem(400);
height: rem(896); height: pxToRem(896);
.pricing-door__feature-description a { .pricing-door__feature-description a {
color: $primary-50; color: $primary-50;
@@ -8,7 +8,7 @@
&__doors { &__doors {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: rem(30); gap: pxToRem(30);
width: 100%; width: 100%;
} }
@@ -25,7 +25,7 @@
width: calc((100% / 3) - 20px); width: calc((100% / 3) - 20px);
.pricing-door__description { .pricing-door__description {
height: rem(42); height: pxToRem(42);
} }
} }
} }
@@ -2,5 +2,5 @@
@use '../mixins/get-contacted' as get-contacted; @use '../mixins/get-contacted' as get-contacted;
.qdrant-pricing-get-contacted { .qdrant-pricing-get-contacted {
@include get-contacted.base($spacer * 2.5, $spacer * 2.5, $spacer * 5, $spacer * 4, rem(350)); @include get-contacted.base($spacer * 2.5, $spacer * 2.5, $spacer * 5, $spacer * 4, pxToRem(350));
} }
@@ -8,13 +8,13 @@
&__title { &__title {
font-size: $spacer * 2; font-size: $spacer * 2;
line-height: rem(38); line-height: pxToRem(38);
margin-bottom: $spacer; margin-bottom: $spacer;
} }
&__subtitle { &__subtitle {
font-size: $spacer * 1.5; font-size: $spacer * 1.5;
line-height: rem(34); line-height: pxToRem(34);
margin-bottom: $spacer; margin-bottom: $spacer;
} }
@@ -28,19 +28,19 @@
&__title { &__title {
font-size: $spacer * 3; font-size: $spacer * 3;
line-height: rem(57); line-height: pxToRem(57);
margin-bottom: $spacer * 1.5; margin-bottom: $spacer * 1.5;
} }
&__subtitle { &__subtitle {
font-size: $spacer * 2; font-size: $spacer * 2;
line-height: rem(38); line-height: pxToRem(38);
margin-bottom: $spacer * 1.5; margin-bottom: $spacer * 1.5;
} }
&__description { &__description {
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
} }
} }
} }
@@ -10,7 +10,7 @@
100%, 100%,
$spacer * 3, $spacer * 3,
$spacer * 2, $spacer * 2,
rem(57), pxToRem(57),
rem(38) pxToRem(38)
); );
} }
@@ -13,8 +13,8 @@
} }
&__description { &__description {
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
margin-bottom: $spacer * 2; margin-bottom: $spacer * 2;
color: $neutral-70; color: $neutral-70;
} }
@@ -45,13 +45,13 @@
&__title { &__title {
font-size: $spacer * 4; font-size: $spacer * 4;
line-height: rem(76); line-height: pxToRem(76);
} }
&__description { &__description {
max-width: rem(730); max-width: pxToRem(730);
font-size: rem(20); font-size: pxToRem(20);
line-height: rem(30); line-height: pxToRem(30);
margin: 0 auto $spacer * 2 auto; margin: 0 auto $spacer * 2 auto;
} }
@@ -14,14 +14,14 @@
&__case { &__case {
&-text .link { &-text .link {
font-size: rem(20); font-size: pxToRem(20);
line-height: rem(30); line-height: pxToRem(30);
margin-bottom: $spacer * 2.5; margin-bottom: $spacer * 2.5;
} }
&-title { &-title {
font-size: $spacer * 2; font-size: $spacer * 2;
line-height: rem(38); line-height: pxToRem(38);
margin-bottom: $spacer * 1.5; margin-bottom: $spacer * 1.5;
color: $neutral-98; color: $neutral-98;
} }
@@ -75,16 +75,16 @@
&-title { &-title {
font-size: $spacer * 3; font-size: $spacer * 3;
line-height: rem(57); line-height: pxToRem(57);
} }
&-description { &-description {
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
} }
&-preview { &-preview {
height: rem(360); height: pxToRem(360);
padding-bottom: 0; padding-bottom: 0;
} }
} }
@@ -14,14 +14,14 @@
&__title { &__title {
font-size: $spacer * 2; font-size: $spacer * 2;
line-height: rem(38); line-height: pxToRem(38);
margin-bottom: $spacer * 2; margin-bottom: $spacer * 2;
color: $neutral-98; color: $neutral-98;
} }
&__description { &__description {
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
margin-bottom: $spacer * 2; margin-bottom: $spacer * 2;
color: $neutral-70; color: $neutral-70;
} }
@@ -45,16 +45,16 @@
&__title { &__title {
font-size: $spacer * 3; font-size: $spacer * 3;
line-height: rem(57); line-height: pxToRem(57);
} }
&__description { &__description {
font-size: rem(20); font-size: pxToRem(20);
line-height: rem(30); line-height: pxToRem(30);
} }
&__preview { &__preview {
height: rem(360); height: pxToRem(360);
padding-bottom: 0; padding-bottom: 0;
} }
} }
@@ -7,7 +7,7 @@
&__title { &__title {
font-size: $spacer * 2; font-size: $spacer * 2;
line-height: rem(38); line-height: pxToRem(38);
color: $neutral-20; color: $neutral-20;
margin-bottom: $spacer * 1.5; margin-bottom: $spacer * 1.5;
} }
@@ -55,13 +55,13 @@
&__title { &__title {
font-size: $spacer * 3; font-size: $spacer * 3;
line-height: rem(57); line-height: pxToRem(57);
} }
&__description { &__description {
font-size: rem(18); font-size: pxToRem(18);
line-height: rem(27); line-height: pxToRem(27);
max-width: rem(445); max-width: pxToRem(445);
&:first-of-type { &:first-of-type {
margin-bottom: $spacer * 2.5; margin-bottom: $spacer * 2.5;
@@ -76,7 +76,7 @@
margin-top: $spacer * 7.5; margin-top: $spacer * 7.5;
&-title { &-title {
max-width: rem(445); max-width: pxToRem(445);
margin-bottom: 0; margin-bottom: 0;
} }
} }
@@ -10,7 +10,7 @@
&__title { &__title {
position: relative; position: relative;
font-size: $spacer * 2; font-size: $spacer * 2;
line-height: rem(38); line-height: pxToRem(38);
margin-bottom: $spacer * 5; margin-bottom: $spacer * 5;
color: $neutral-98; color: $neutral-98;
text-align: center; text-align: center;
@@ -29,15 +29,15 @@
} }
&-title { &-title {
font-size: rem(20); font-size: pxToRem(20);
line-height: rem(30); line-height: pxToRem(30);
margin-bottom: $spacer * 0.5; margin-bottom: $spacer * 0.5;
color: $neutral-98; color: $neutral-98;
} }
&-description { &-description {
font-size: rem(14); font-size: pxToRem(14);
line-height: rem(21); line-height: pxToRem(21);
margin-bottom: 0; margin-bottom: 0;
color: $neutral-70; color: $neutral-70;
} }
@@ -48,7 +48,7 @@
padding-bottom: $spacer * 7.5; padding-bottom: $spacer * 7.5;
&__title { &__title {
width: rem(730); width: pxToRem(730);
margin: 0 auto $spacer * 6.5; margin: 0 auto $spacer * 6.5;
font-size: $spacer * 2.5; font-size: $spacer * 2.5;
line-height: $spacer * 3; line-height: $spacer * 3;

Some files were not shown because too many files have changed in this diff Show More