.about-grid {
  width: 100%;
  margin-inline: 0;
}

.about-grid > div {
  min-height: 680px;
  border-top: 1px solid var(--line);
}

.about-person {
  display: flex;
  flex-direction: column;
}

.about-person > small,
.about-person > h3,
.about-person > .person-dots,
.about-grid .about-person > figure {
  position: relative;
  left: clamp(8px, .55vw, 12px);
}

.about-person h3 {
  margin: 22px 0 20px;
  font-size: clamp(2.8rem, 4vw, 5.5rem);
  line-height: .9;
  letter-spacing: .06em;
}

.person-dots {
  display: flex;
  gap: 10px;
  margin: 8px 0 70px;
}

.person-dots i {
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.person-dots i:first-child {
  background: currentColor;
}

.about-grid .about-person figure {
  width: 58%;
  max-width: 360px;
  height: auto;
  aspect-ratio: 1856 / 2304;
  margin: auto 0 0;
}

.about-person figure img {
  object-position: center;
  transition: transform .7s cubic-bezier(.22, .75, .2, 1), filter .7s cubic-bezier(.22, .75, .2, 1);
  will-change: transform, filter;
}

.about-person figure:hover img {
  transform: scale(1.05);
  filter: brightness(.94);
}

.about-grid .result > p {
  margin: 22px 0 26px;
}

.about-grid .result strong {
  display: inline-flex;
  flex-direction: column;
  margin-top: 64px;
  font-size: clamp(4.8rem, 6.7vw, 8.5rem);
  line-height: .82;
}

.about-grid .result strong span {
  display: block;
}

.about-grid .result strong span:last-child {
  margin-top: .1em;
  text-align: right;
}

.about-grid .result .circle-link {
  margin-top: 70px;
  border-width: 1px;
  border-color: #0a0a0a;
  font-weight: 500;
  text-rendering: geometricPrecision;
}

@media (max-width: 800px) {
  .about-grid > div {
    min-height: auto;
  }

  .person-dots {
    margin-bottom: 0;
  }

  .about-grid .about-person figure {
    width: 76%;
    height: auto;
    margin-top: 48px;
  }

  .about-grid .result strong {
    font-size: 22vw;
  }
}