.sec_education {
  position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 70% 45%, #162c5d, #08172d 55%, #081525 100%);
  &::before { position: absolute; z-index: -1; inset: 0; background: url("../../assets/images/mesh-wave.svg") center bottom / cover no-repeat; content: ""; opacity: .35; }
  .wrap { margin: 0 auto; padding: 85px 40px 85px; max-width: 1400px; min-height: 410px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 40px; }
  .copy { max-width: 550px; .kicker { margin-bottom: 16px; } h2 { font-size: 39px; font-weight: 800; line-height: 1.45em; letter-spacing: -.035em; } .catch { margin-top: 14px; color: #eaf3ff; font-size: 17px; font-weight: 700; line-height: 1.6em; } > p:not(.kicker, .catch) { margin-top: 18px; color: #c0d1e9; font-size: 15px; line-height: 1.95em; } .actions { margin-top: 26px; display: flex; align-items: center; flex-wrap: wrap; gap: 16px 22px; } .btn_ptn_2 { min-width: 185px; } }
  .visual { position: relative; min-height: 330px; img { margin: -50px auto; width: min(100%, 590px); height: 430px; object-fit: cover; object-position: center; border-radius: 50%; mix-blend-mode: screen; mask-image: radial-gradient(circle, #000 42%, transparent 73%); } }
  .tag { position: absolute; padding: 8px 16px; border: 1px solid #6497ec; border-radius: 50px; background: #11264abf; box-shadow: 0 0 17px #4174d66b; color: #d7e9ff; font-size: 13px; font-weight: 700; white-space: nowrap; &.tag-a { top: 8%; right: 1%; } &.tag-b { top: 42%; right: -4%; } &.tag-c { right: 4%; bottom: 7%; } }
  @media (max-width: 1200px) { .wrap { gap: 28px; } .copy h2 { font-size: 36px; } }
  @media (max-width: 850px) { .wrap { padding: 75px 28px; gap: 15px; } .tag { font-size: 11px; } .copy { h2 { font-size: 32px; } .actions { gap: 12px; } } }
  @media (max-width: 650px) { .wrap { padding: 72px 18px 60px; grid-template-columns: 1fr; } .copy { max-width: none; h2 { font-size: 30px; } > p:not(.kicker, .catch) { font-size: 14px; } .actions { align-items: flex-start; flex-direction: column; } } .visual { margin: 20px -18px 0; min-height: 250px; img { margin: -30px auto; height: 320px; } } .tag { padding: 6px 10px; font-size: 10px; &.tag-b { right: 1%; } } }
  @media (max-width: 400px) { .copy { h2 { font-size: 28px; } .catch { font-size: 16px; } } }
}