.sec_web_approach {
  padding: 78px 40px 84px;
  background: #fff;

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

  .cards {
    margin-top: 31px;
    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: .85fr 1.15fr;
    border: 1px solid #d8e7f8;
    border-radius: 10px;
    background: #f9fcff;
    box-shadow: 0 12px 28px #2c6db913;

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

  .image {
    overflow: hidden;
    min-width: 0;

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

  .copy {
    padding: 27px 29px;

    .number { color: #2a77e7; font-family: var(--font-en); font-size: 10px; font-weight: 800; letter-spacing: .15em; }
    h3 { margin-top: 13px; color: #0d2c55; font-size: 19px; font-weight: 800; line-height: 1.5em; }
    p { margin-top: 13px; color: #5f7793; font-size: 13px; line-height: 1.85em; }
    .arrow { margin-top: 17px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #1d70e7; background: #e7f2ff; font-size: 18px; transition: color .2s, background .2s; &:hover, &:focus-visible { color: #fff; background: #1d70e7; } &:focus-visible { outline: 2px solid #1d70e7; outline-offset: 3px; } }
    @media (max-width: 600px) { padding: 21px 22px 23px; h3 { margin-top: 8px; font-size: 18px; } p { margin-top: 8px; } }
  }

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