.sec_web_products {
  padding: 78px 40px 79px;
  background: linear-gradient(115deg, #f2f8ff, #fff 58%);

  .wrap { margin: 0 auto; max-width: 1360px; }
  .kicker { margin-bottom: 7px; }
  .title-row { display: flex; align-items: end; gap: 32px; }
  h2 { color: #0b2344; font-size: 34px; font-weight: 800; line-height: 1.45em; letter-spacing: -.03em; }
  .title-row p { padding-bottom: 6px; color: #68809b; font-size: 14px; line-height: 1.7em; }

  .cards {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;

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

  .card {
    overflow: hidden;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
    border: 1px solid #d7e7f8;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 13px 31px #1a559d12;

    @media (max-width: 900px) { grid-template-columns: minmax(0, .65fr) minmax(0, 1fr); }
    @media (max-width: 600px) { grid-template-columns: 1fr; }
  }

  .image {
    overflow: hidden;
    min-width: 0;
    background: #061630;

    img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(1.2); transition: transform .6s ease; }
    @media (hover: hover) { .card:hover & img { transform: scale(1.08); } }
    @media (max-width: 600px) { img { aspect-ratio: 2.05; } }
  }

  .copy {
    padding: 26px 27px;

    .number { color: #2474e1; font-family: var(--font-en); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
    h3 { margin-top: 9px; color: #0d2b51; font-size: 22px; font-weight: 800; line-height: 1.4em; }
    p:not(.number) { margin-top: 10px; color: #5d7691; font-size: 13px; line-height: 1.8em; }
    a { margin-top: 16px; display: inline-flex; align-items: center; gap: 10px; color: #176ae5; font-size: 13px; font-weight: 700; line-height: 1.5em; &:hover, &:focus-visible { color: #6552e9; text-decoration: underline; } }
    @media (max-width: 600px) { padding: 21px 23px 24px; }
  }

  .disclaimer { margin-top: 17px; color: #8192a8; font-size: 11px; line-height: 1.8em; }

  @media (max-width: 800px) { padding: 65px 28px 70px; .title-row { display: block; } .title-row p { margin-top: 7px; } }
  @media (max-width: 600px) { padding: 55px 18px 58px; h2 { font-size: 27px; } }
}