сделал projects и how, а также input для ПК

assets/css/gp-style-core.css

@@ -190,6 +190,83 @@ body{
     text-decoration-skip-ink: none;
     color: var(--link);
 }
+
+.input__block{
+    display: flex;
+    flex-direction: column;
+
+    border-radius: 4px;
+
+    position: relative;
+}
+.input__label{
+    position: absolute;
+    top: 14px;
+    left: 24px;
+
+
+    font-size: 12px;
+    color: var(--link);
+    text-transform: uppercase;
+
+    transition: all 0.3s;
+}
+.input__field{
+    height: 64px;
+
+    padding: 31px 24px 14px 24px;
+
+    height: 64px;
+
+    background-color: var(--background-grey-hover);
+    border: none;
+    border-radius: 4px;
+
+    font-weight: 400;
+    font-size: 16px;
+    color: var(--text-white);
+
+    outline: none;
+    transition: all 0.3s;
+}
+.input__field:hover{
+    border: 1px solid var(--text-white);
+}
+.input__field:focus{
+    border: 1px solid var(--text-white);
+}
+.input__field:placeholder-shown + .input__label{
+    top: 22.5px;
+    left: 24px;
+
+    font-weight: 400;
+    font-size: 16px;
+    color: var(--text-white);
+}
+.input__field:focus + .input__label{
+    top: 14px;
+    left: 24px;
+
+
+    font-size: 12px;
+    color: var(--link);
+}
+.input__field:not(:placeholder-shown):invalid{
+    border: 1px solid #ef120a;
+}
+.input__error{
+    margin-top: 16px;
+
+    font-weight: 400;
+    font-size: 12px;
+    text-transform: uppercase;
+    color: var(--text-white);
+
+    display: none;
+}
+.form.checked .input__error{
+    display: block;
+}
 /* components */
 
 /* header */

assets/css/gp-style-desktop.css

@@ -361,10 +361,208 @@
 
 /* projects */
 .projects{
-    margin: 34px -20px -20px -20px;
+    margin: 37px -20px -20px -20px;
+
+    display: flex;
+    flex-wrap: wrap;
+}
+.projects__item{
+    margin: 20px;
+
+    width: calc(50% - 40px);
+
+    display: flex;
+    flex-direction: column;
+
+    border-radius: 4px;
+    overflow: hidden;
+}
+.projects-item__img{
+    width: 100%;
+    height: 304px;
+
+    object-fit: cover;
+}
+.projects-item__content{
+    min-height: 275px;
+
+    padding: 32px;
+
+    background-color: var(--background-grey);
+}
+.projects-item__tags{
+    display: flex;
+    align-items: center;
+}
+.projects-item__tag{
+    margin-left: 40px;
+
+    display: flex;
+    align-items: center;
+}
+.projects-item__tag:first-child{
+    margin-left: 0;
+}
+.projects-item-tag__icon{
+    width: 24px;
+    aspect-ratio: 1;
+}
+.projects-item-tag__name{
+    margin-left: 16px;
+}
+.projects-item__text{
+    margin-top: 32px;
+}
+.projects-item__text .text-2{
+    margin-top: 16px;
+}
+.projects__next{
+    margin-top: 56px;
+
+    display: flex;
+    justify-content: center;
 }
 /* projects */
 
+/* how */
+.how{
+    margin-top: 56px;
+
+    display: flex;
+}
+.how__control{
+    width: 577px;
+
+    flex-shrink: 0;
+}
+.how-control__item{
+    margin-top: 24px;
+
+    padding: 16px;
+
+    display: flex;
+    align-items: center;
+
+    background-color: var(--background-grey);
+    border-radius: 4px;
+
+    transition: background-color .3s;
+}
+.how-control__item:first-child{
+    margin-top: 0;
+}
+.how-control-item__number{
+    width: 64px;
+    aspect-ratio: 1;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    border-radius: 4px;
+    background-color: var(--background-grey-hover);
+
+    transition: background-color .3s;
+}
+.how-control__item__name{
+    margin-left: 24px;
+
+    max-width: 440px;
+}
+.how-control__item:hover{
+    background-color: var(--background-grey-hover);
+}
+.how-control__item:hover .how-control-item__number{
+    background-color: var(--background-grey);
+}
+.how-control__item.active{
+    background-color: var(--background-grey-hover);
+}
+.how-control__item.active .how-control-item__number{
+    background-color: var(--background-grey);
+}
+
+.how__content{
+    margin-left: 40px;
+
+    width: 100%;
+}
+.how-content__item{
+    width: 100%;
+
+    padding: 32px;
+
+    background-color: var(--background-grey);
+
+    overflow: hidden;
+
+    display: none;
+}
+.how-content__item.active{
+    display: block;
+}
+.how-content__item .text-2{
+    margin-top: 16px;
+}
+.how-content-item__content{
+    margin-top: 24px;
+
+    display: flex;
+
+    position: relative;
+}
+.how-content-item__content .text-2{
+    margin-top: 16px;
+}
+.how-content-item__content .text-2:first-child{
+    margin-top: 0;
+}
+.how-content-item__text{
+    width: 480px;
+}
+.how-content-item__img--1{
+    position: absolute;
+    right: -36px;
+    bottom: -39px;
+
+    width: 303px;
+    height: 303px;
+}
+.how-content-item__img--2{
+    position: absolute;
+    right: -34px;
+    bottom: -41px;
+}
+.how-content-item__img--3{
+    position: absolute;
+    right: -31.98px;
+    bottom: -30.98px;
+
+    width: 336px;
+    height: 336px;
+}
+/* how */
+
+/* free */
+.free{
+    padding: 88px 64px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    background-color: var(--background-grey);
+}
+/* .free > .title-1{
+    text-align: center;
+} */
+.free__content{
+    margin-top: 56px;
+
+    width: 800px;
+}
+/* free */
+
 /* services */
 .services{
     margin: 34px -20px -20px -20px;