.service-screen {
   margin-top: 90px;
}

.service-screen__title {
   margin-bottom: 60px;
   font-style: normal;
   font-weight: 500;
   font-size: 60px;
   line-height: 72px;
   text-align: center;
   color: #2A2D33;
}

.cards__items {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: repeat(2, 1fr);
   grid-column-gap: 20px;
   grid-row-gap: 20px;
}

#item__card-special {
   grid-area: 2 / 3 / 3 / 5;
}

.item__card {
   position: relative;
   padding-top: 20px;
   padding-left: 20px;
   height: 330px;
   background: #EEEDFB;
   border-radius: 10px;
}

.card__title {
   margin-bottom: 20px;
   font-style: normal;
   font-weight: 700;
   font-size: 32px;
   line-height: 38px;
   color: #2A2D33;
}

.card__description {
   margin-bottom: 10px;
   font-style: normal;
   font-weight: 400;
   font-size: 20px;
   line-height: 24px;
   color: #2A2D33;
}

.card__img {
   width: 60px;
   height: 60px;
   position: absolute;
}

.card__img--left {
   bottom: 20px;
   left: 20px;
}

.card__img--right {
   bottom: 20px;
   right: 40px;
}

.card__img--reg {
   width: 60px;
   height: 60px;
}

.card__img--fn {
   width: 60px;
   height: 50px;
}

.card__img--lock {
   width: 60px;
   height: 60px;
}

.card__img--document {
   width: 60px;
   height: 62px;
}

.card__img--maintenance {
   width: 68px;
   height: 55px;
}

.card__img--marking {
   width: 68px;
   height: 58px;
}

.card__img--settings {
   width: 60px;
   height: 49px;
}

.item__card:nth-child(1) {
   grid-area: 1 / 1 / 2 / 2;
}

.item__card:nth-child(2) {
   grid-area: 1 / 2 / 2 / 3;
}

.item__card:nth-child(3) {
   grid-area: 1 / 3 / 2 / 4;
}

.item__card:nth-child(4) {
   grid-area: 1 / 4 / 2 / 5;
}

.item__card:nth-child(5) {
   grid-area: 2 / 1 / 3 / 2;
}

.item__card:nth-child(6) {
   grid-area: 2 / 2 / 3 / 3;
}

@media (max-width: 1280px) {

   .cards__items {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      grid-column-gap: 20px;
      grid-row-gap: 20px;
   }

   #item__card-special {
      grid-area: 3 / 1 / 4 / 4;
   }

   .item__card:nth-child(1) {
      grid-area: 1 / 1 / 2 / 2;
   }

   .item__card:nth-child(2) {
      grid-area: 1 / 2 / 2 / 3;
   }

   .item__card:nth-child(3) {
      grid-area: 1 / 3 / 2 / 4;
   }

   .item__card:nth-child(4) {
      grid-area: 2 / 1 / 3 / 2;
   }

   .item__card:nth-child(5) {
      grid-area: 2 / 2 / 3 / 3;
   }

   .item__card:nth-child(6) {
      grid-area: 2 / 3 / 3 / 4;
   }
}

@media (max-width: 1024px) {

   .service-screen {
      margin-top: 60px;
   }

   .service-screen__title {
      margin-bottom: 30px;
      font-style: normal;
      font-weight: 500;
      font-size: 34px;
      line-height: 41px;
   }

   .cards__items {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(4, 1fr);
      grid-column-gap: 20px;
      grid-row-gap: 20px;
   }

   #item__card-special {
      grid-area: 4 / 1 / 5 / 3;
   }

   .item__card:nth-child(1) {
      grid-area: 1 / 1 / 2 / 2;
   }

   .item__card:nth-child(2) {
      grid-area: 1 / 2 / 2 / 3;
   }

   .item__card:nth-child(3) {
      grid-area: 2 / 1 / 3 / 2;
   }

   .item__card:nth-child(4) {
      grid-area: 2 / 2 / 3 / 3;
   }

   .item__card:nth-child(5) {
      grid-area: 3 / 1 / 4 / 2;
   }

   .item__card:nth-child(6) {
      grid-area: 3 / 2 / 4 / 3;
   }

   .card__title {
      margin-bottom: 10px;
      font-style: normal;
      font-weight: 700;
      font-size: 22px;
      line-height: 26px;
   }

   .card__description {
      margin-bottom: 0;
      font-style: normal;
      font-weight: 400;
      font-size: 18px;
      line-height: 22px;
   }
}

@media (max-width: 767px) {

   .service-screen {
      margin-top: 40px;
   }

   .service-screen__title {
      margin-bottom: 40px;
      font-style: normal;
      font-weight: 500;
      font-size: 28px;
      line-height: 34px;
   }

   .service-screen__cards {
      display: flex;
      overflow-x: scroll;
   }

   .cards__items {
      flex-wrap: nowrap;
      box-sizing: content-box;
      display: flex;
   }

   .item__card {
      width: 90vw;
   }

   .card__title {
      font-style: normal;
      font-weight: 700;
      font-size: 22px;
      line-height: 26px;
   }

   .card__description {
      font-style: normal;
      font-weight: 400;
      font-size: 18px;
      line-height: 22px;
   }

}