.about-hero,
.about-story {
  display: grid;
  align-items: start;
  column-gap: clamp(3rem, 8vw, 8rem);
  padding-block: clamp(3.75rem, 6.6vw, 7rem);
}

.about-hero {
  grid-template-columns: minmax(0, 1.65fr) minmax(0, .7fr);
  align-items: center;
}

.about-mark {
  display: grid;
  place-items: center;
  justify-self: center;
  width: min(100%, 16rem);
  aspect-ratio: 1;
  border: 1px solid #42606a;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at center, transparent 0 16%, #34515c 16.2% 16.6%, transparent 16.9% 26%);
}

.about-mark img { width: 65%; }

.about-story {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
}

.about-story h2 { max-width: 10em; }
.about-story h3 { font-size: 1.35rem; }

@media (max-width: 760px) {
  .about-hero,
  .about-story { grid-template-columns: 1fr; }
  .about-story { row-gap: 1.75rem; }
  .about-mark { display: none; }
}