.sec_app_examples {
  padding: 84px 40px 89px;
  background: linear-gradient(95deg, #f2f8ff, #f9fcff 56%, #eef6ff);

  .wrap {
    margin: 0 auto;
    max-width: 1360px;
    display: grid;
    grid-template-columns: minmax(0, .43fr) minmax(0, 1fr);
    align-items: start;
    gap: 46px;

    @media (max-width: 900px) { grid-template-columns: 1fr; gap: 30px; }
  }

  .intro {
    padding-top: 31px;
    .kicker { margin-bottom: 10px; }
    h2 { color: #0b2344; font-size: 32px; font-weight: 800; line-height: 1.5em; letter-spacing: -.03em; }
    > p:not(.kicker) { margin-top: 20px; max-width: 420px; color: #607995; font-size: 14px; line-height: 1.85em; }
    .link_ptn_5 { margin-top: 24px; }
    @media (max-width: 900px) { padding-top: 0; }
    @media (max-width: 600px) { h2 { font-size: 28px; } }
  }

  .cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;

    .card {
      padding: 25px 20px 24px;
      min-width: 0;
      border: 1px solid var(--app-line);
      border-radius: 9px;
      background: #fff;
      text-align: center;
      box-shadow: 0 12px 32px #1d60aa0a;

      .icon { margin: 0 auto 14px; width: 45px; height: 45px; display: grid; place-items: center; }
      svg { width: 40px; height: 40px; fill: none; stroke: #126de5; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
      h3 { color: #18385d; font-size: 16px; font-weight: 800; line-height: 1.5em; }
      p { margin-top: 10px; color: #657c98; font-size: 12px; line-height: 1.8em; }
    }

    @media (max-width: 600px) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; .card { padding: 21px 13px; h3 { font-size: 14px; } } }
  }

  .extra { grid-column: 2; color: #54708f; font-size: 13px; line-height: 1.8em; @media (max-width: 900px) { grid-column: 1; } }

  @media (max-width: 800px) { padding: 69px 28px 76px; }
  @media (max-width: 600px) { padding: 58px 18px 62px; }
}