/* Блок «Возможности интеграции распознавания паспорта» */
/*
xs  < 576px — базовые стили
sm  ≥ 576px
md  ≥ 768px
lg  ≥ 992px
xl  ≥ 1200px
xxl ≥ 1400px
*/

.recognition-integration-section {

  .recognition-integration-ul {

    .recognition-integration-li {
      margin-bottom: 0;

      .recognition-integration-block {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 28px;
        padding: 24px 16px 32px;
        height: 100%;
        background: #fff;
        border: 1px solid #c9cfce;
        box-shadow: 4px 4px 0 #c9cfce;
        border-radius: 12px;

        .recognition-integration-text {
          font-size: 16px;
          width: 100%;

          ul {
            li {
              margin-bottom: 0.57em;
              font-family: 'Inter', sans-serif;
              font-weight: 500;
            }
          }
        }
        .recognition-integration-text.custom {
          text-align: center;
          a {
            color: #e42e00;
            font-weight: 600;
            font-size: 32px;
          }
        }

        .recognition-integration-img {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 129px;
          height: 129px;
        }

        .recognition-integration-link {
          color: #e42e00;
          font-weight: bold;
          font-size: 20px;
          text-decoration: underline;
        }

        .recognition-integration-link:hover {
          color: #e42e00;
          text-decoration: none;
        }

        .column2-ul {
          column-count: 2;
        }
      }
    }

    .recognition-integration-li.swiper-slide {
      height: unset;
    }
  }

  .swiper {
    padding-bottom: 54px;
    overflow: visible;
    --swiper-pagination-bottom: 2px;

    .swiper-button-next, .swiper-button-prev {
      top: auto;
      bottom: 0;
      height: 30px;
    }

    .swiper-button-prev {
      margin-left: calc(50% - 138px)
    }

    .swiper-button-next {
      margin-right: calc(50% - 138px)
    }

    .swiper-pagination-bullet {
      width: 16px;
      height: 16px;
      background-color: white;
      opacity: 1;
    }

    .swiper-pagination-bullet-active {
      background-color: #00B09A;
    }

  }
}

ul.disc-list li {
  list-style: disc;
}

/* ========================================
   (≥ 576px)
   ======================================== */
@media only screen and (min-width: 576px) {

}

/* ========================================
   (≥ 768px)
   ======================================== */
@media only screen and (min-width: 768px) {
  .recognition-integration-section {
    .swiper {
      overflow: visible;
      padding-bottom: 24px;
    }
    .recognition-integration-ul {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 20px;
      margin-bottom: 48px;

      .recognition-integration-li {
        .recognition-integration-block {
          flex-direction: column;
          align-items: center;

          .recognition-integration-img {
            min-width: 129px;
            height: 129px;
          }
        }
      }
    }
  }


  .swiper-button-next, .swiper-button-prev, .swiper-pagination {
    display: none;
  }
}

/* ========================================
   (≥ 992px)
   ======================================== */
@media only screen and (min-width: 992px) {
  .recognition-integration-section {
    padding-block: 90px;

    .recognition-integration-ul {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 20px;
      margin-bottom:28px ;

      .recognition-integration-li {
        .recognition-integration-block {
          flex-direction: row;
          align-items: center;
          padding: 48px 40px;
          gap: 16px;

          .recognition-integration-text {
            width: 100%;
            font-size: 16px;
          }
          .recognition-integration-text.custom {
            text-align: start;
            a {
              font-size: 20px;
            }
          }
        }
      }
    }

  }
}

/* ========================================
   (≥ 1200px)
   ======================================== */
@media only screen and (min-width: 1200px) {

}

/* ========================================
   (≥ 1400px)
   ======================================== */
@media only screen and (min-width: 1400px) {

}