.service-block {
   &__wrapper {
      display: grid;
      gap: 32px;

      @include _XSDesktop {
         grid-template-columns: auto 516px;
         grid-template-rows: 0px auto 0px auto 0px;
         align-items: center;
         gap: 0;
         column-gap: 60px;
      }

      @include _Desktop {
         column-gap: 80px;
         grid-template-columns: auto 49%;
      }

      @include _LDesktop {
         grid-template-columns: auto 52%;
      }

      @include _HDesktop {
         column-gap: 100px;
      }
   }

   &__image {
      aspect-ratio: 34/21;
      width: 100%;
      order: 1;

      img {
         width: 100%;
         height: 100%;
         object-fit: cover;
      }

      @include _Tablet {
         aspect-ratio: 69/35;
      }

      @include _XSDesktop {
         aspect-ratio: 37/38;
         grid-column: 1;
         grid-row: 1 / -1;
         min-height: 380px;
         align-self: start;
      }

      @include _Desktop {
         aspect-ratio: 49/47;
      }

      @include _LDesktop {
         aspect-ratio: 26/21;
      }
   }

   &__over-image {
      order: 0;
      @include _XSDesktop {
         grid-column: 2;
         grid-row: 2;
         align-self: end;
      }
      @include _Desktop {
         max-width: 455px;
         text-wrap: balance;
      }

      @include _HDesktop {
         max-width: 760px;
      }
   }

   &__under-image {
      order: 2;
      @include _XSDesktop {
         grid-column: 2;
         grid-row: 4;
         align-self: start;
      }
   }

   &__subtitle {
      margin-bottom: 16px;

      @include _Tablet {
         margin-bottom: 24px;
      }

      @include _XSDesktop {
         margin-bottom: 32px;
      }

      @include _Desktop {
         margin-bottom: 24px;
      }

      @include _HDesktop {
         margin-bottom: 32px;
      }
   }

   &__h2 {
      @include _XSDesktop {
         margin-bottom: 16px;
      }

      @include _HDesktop {
         margin-bottom: 32px;
      }
   }

   &__content {
   }

   &__text {
      margin-bottom: 16px;
      color: #ffffff99;

      @include _Tablet {
         margin-bottom: 24px;
      }

      @include _XSDesktop {
         margin-bottom: 32px;
         font-size: rem(14);
      }
      @include _Desktop {
         max-width: 455px;
      }

      @include _HDesktop {
         max-width: 590px;
         font-size: rem(16);
      }
   }

   &__types {
      margin-bottom: 32px;
      display: flex;
      flex-direction: column;
      gap: 16px;

      @include _Tablet {
         flex-direction: row;
         flex-wrap: wrap;
      }

      @include _HDesktop {
         margin-bottom: 60px;
         column-gap: 32px;
      }
   }

   &__type {
      display: flex;
      gap: 16px;
      color: #ffffff;

      @include _XSDesktop {
         font-size: rem(14);
      }
      @include _HDesktop {
         font-size: rem(16);
      }
   }

   &__type-icon {
      flex: 0 0 16px;

      @include _HDesktop {
         flex: 0 0 20px;
      }
   }

   &__accordion {
      background-color: #000000;

      @include _Desktop {
         max-width: 455px;
      }

      @include _HDesktop {
         max-width: 760px;
      }

      .accordion {
         &__f-a-q {
            border: none;
            padding: 17px 24px;

            @include _HDesktop {
               padding: 26px 24px;
            }
         }

         &__question {
            justify-content: space-between;
            width: 100%;

            @include _Tablet {
               letter-spacing: -1%;
            }

            @include _XSDesktop {
               font-size: rem(14);
            }
            @include _HDesktop {
               font-size: rem(24);
            }
         }

         &__question-icon {
         }

         &__content {
         }
      }
   }

   &__list {
      > p {
         position: relative;
         padding-left: 32px;
         font-size: 14px;
         color: #ffffff99;
         margin-bottom: 24px;

         @include _Tablet {
            font-size: 16px;
         }

         @include _XSDesktop {
            font-size: 12px;
         }

         @include _HDesktop {
            font-size: 16px;
            margin-bottom: 24px;
         }

         &:first-child {
            margin-top: 32px;

            @include _Tablet {
               margin-top: 26px;
            }

            @include _XSDesktop {
               margin-top: 24px;
            }
         }

         &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(0, -50%);
            width: 16px;
            height: 16px;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8.00097 15.209C11.9818 15.209 15.209 11.9818 15.209 8.00097C15.209 4.0201 11.9818 0.792969 8.00097 0.792969C4.0201 0.792969 0.792969 4.0201 0.792969 8.00097C0.792969 11.9818 4.0201 15.209 8.00097 15.209Z' fill='white'/%3e%3cpath d='M7.99297 0.792969C6.56895 0.792969 5.1769 1.21524 3.99287 2.00639C2.80883 2.79753 1.88599 3.92202 1.34104 5.23765C0.796088 6.55328 0.653504 8.00096 0.931318 9.39762C1.20913 10.7943 1.89487 12.0772 2.9018 13.0841C3.90874 14.0911 5.19166 14.7768 6.58832 15.0546C7.98498 15.3324 9.43266 15.1899 10.7483 14.6449C12.0639 14.1 13.1884 13.1771 13.9796 11.9931C14.7707 10.809 15.193 9.41699 15.193 7.99297C15.193 6.08341 14.4344 4.25206 13.0841 2.9018C11.7339 1.55154 9.90253 0.792969 7.99297 0.792969ZM11.377 5.96097L7.82497 10.889C7.71917 11.0318 7.56476 11.131 7.39087 11.1678C7.21697 11.2047 7.03561 11.1766 6.88097 11.089L4.84097 9.89697C4.67548 9.79725 4.55637 9.63587 4.50987 9.44833C4.46336 9.2608 4.49325 9.06246 4.59297 8.89697C4.69269 8.73147 4.85407 8.61237 5.04161 8.56586C5.22915 8.51935 5.42748 8.54925 5.59297 8.64897L7.04097 9.51297L10.241 5.12097C10.3597 5.00199 10.5164 4.92832 10.6838 4.91273C10.8512 4.89713 11.0187 4.9406 11.1574 5.0356C11.2961 5.1306 11.3972 5.27113 11.4431 5.43284C11.4891 5.59455 11.477 5.76724 11.409 5.92097L11.377 5.96097Z' fill='%23E74B22'/%3e%3c/svg%3e");
         }
      }
   }
}
