.sec_solution {
  position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 50% 30%, #122b55, #07182e 52%, #081528 100%);
  &::before { position: absolute; z-index: -1; left: -10%; bottom: -120px; width: 120%; height: 430px; background: url("../../assets/images/mesh-wave.svg") center / cover no-repeat; content: ""; opacity: .4; }
  .wrap { margin: 0 auto; padding: 105px 40px 105px; max-width: 1330px; text-align: center; }
  .heading { margin: 0 auto; max-width: 800px; .kicker { margin-bottom: 20px; } h2 { font-size: 39px; font-weight: 800; line-height: 1.5em; letter-spacing: -.03em; } > p:last-child { margin-top: 16px; color: #b4c7e1; font-size: 15px; } }
  .question { margin: 55px auto 0; padding: 12px 30px; width: fit-content; border: 1px solid #6ca8f2; border-radius: 50px; background: #102449; color: #e0eeff; font-size: 15px; font-weight: 700; box-shadow: 0 0 30px #4355ff44; }
  .choices { position: relative; margin-top: 55px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 21px; &::before { position: absolute; z-index: -1; top: -26px; right: 16%; left: 16%; height: 1px; background: #5c9df3; content: ""; } }
  .choices article { position: relative; padding: 32px 25px 36px; min-height: 305px; border: 1px solid #3d5a84; border-radius: 13px; background: linear-gradient(155deg, #13233f, #0d1a31); box-shadow: 0 22px 38px #030c1e5c; &::before { position: absolute; top: -56px; left: calc(50% - .5px); width: 1px; height: 30px; background: #5c9df3; content: ""; } }
  .symbol { margin: 0 auto 20px; width: 60px; height: 60px; display: grid; place-items: center; border: 2px solid #7abefb; border-radius: 50%; color: #abddff; background: #1b3b64; font-family: var(--font-en); font-size: 34px; font-weight: 600; box-shadow: 0 0 25px #357eff55; &.static { border-color: #8bb8ff; color: #92bdff; } &.custom { border-color: #a58bff; color: #b7a6ff; } }
  .answer { color: #bdd4f0; font-size: 13px; font-weight: 700; }
  h3 { margin-top: 12px; font-size: 23px; font-weight: 800; line-height: 1.45em; }
  article > p:last-child { margin: 17px auto 0; max-width: 270px; color: #aebfd7; font-size: 13px; line-height: 1.8em; }
  .note { margin-top: 30px; color: #adc4e3; font-size: 13px; }
  @media (max-width: 900px) { .wrap { padding: 85px 28px; } .choices { gap: 12px; } .choices article { padding: 30px 15px; } h3 { font-size: 19px; } }
  @media (max-width: 650px) { .wrap { padding: 75px 18px; } .heading h2 { font-size: 29px; } .heading > p:last-child { font-size: 14px; } .question { margin-top: 35px; font-size: 13px; } .choices { margin-top: 28px; grid-template-columns: 1fr; gap: 12px; &::before { display: none; } } .choices article { padding: 25px; min-height: 0; &::before { display: none; } } .symbol { margin-bottom: 10px; width: 50px; height: 50px; font-size: 28px; } h3 { font-size: 21px; } }
}