/* Let the symbolic photograph dissolve into the section, without a card. */
.about {
  border-top: 0;
  background: radial-gradient(ellipse at 20% 48%, #b6955c0b, transparent 50%),
    linear-gradient(#112330, #132633);
}
.about-visual {
  width: 100%;
  margin: 0 auto;
  max-width: 460px;
  max-height: none;
  aspect-ratio: auto;
  clip-path: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  mask-image: linear-gradient(to right, transparent, #000 16%, #000 80%, transparent),
    linear-gradient(to bottom, transparent, #000 7%, #000 72%, transparent);
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16%, #000 80%, transparent),
    linear-gradient(to bottom, transparent, #000 7%, #000 72%, transparent);
  -webkit-mask-composite: source-in;
}
.about-visual::after { display: none; }
.about-visual figcaption { display: none; }
.about-visual > img { display: block; width: 100%; height: auto; object-fit: contain; object-position: center; }
.about-visual:hover > img { transform: none; }
@media (max-width: 700px) {
  .about { gap: 12px; }
  .about-visual {
    width: 100%;
    margin: 0 auto;
    max-width: 420px;
    max-height: none;
    aspect-ratio: auto;
    mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
      linear-gradient(to bottom, transparent, #000 7%, #000 72%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
      linear-gradient(to bottom, transparent, #000 7%, #000 72%, transparent);
  }
}