.about {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #fff;
  color: var(--ink);
}

.about::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0 42% 0 0;
  background: linear-gradient(145deg, #e9f7f6 0%, #f4fbfb 62%, #fff 62.2%);
  clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%);
}

.about::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 2px;
  height: 145%;
  left: 47%;
  top: -23%;
  background: linear-gradient(transparent, var(--blue), transparent);
  transform: rotate(14deg);
  opacity: .4;
}

.about-grid { position: relative; z-index: 1; }
.about-visual::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -18px 28px 18px -18px;
  border: 1px solid rgba(0, 156, 154, .3);
  clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
}
.about-visual img { clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); }
.about-visual > div { color: #fff; }
.about-visual > div strong { font-size: 38px; line-height: 1.05; }
.about-visual > div span { font-size: 15px; line-height: 1.5; margin-top: 8px; }
.about-content h2 { color: var(--ink); }
.about-content > p { color: var(--muted); }
.values { border-top-color: var(--line); }
.values > div { border-bottom-color: var(--line); }
.values span { color: var(--muted); }
.values strong { color: var(--ink); }

@media (max-width: 980px) {
  .about::before { inset: 0 20% 48% 0; }
  .about::after { left: 72%; }
}

@media (max-width: 680px) {
  .about::before { inset: 0 5% 58% 0; }
  .about-visual::before { inset: -10px 15px 12px -10px; }
}