/* About portrait reframe — v143.
   Remove the old full-viewport crop and make the subject the focus.
   Do not modify the homepage wallpaper, artwork files, or other sections. */

html body #about .about-portrait {
  height: auto !important;
  max-width: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  overflow: visible !important;
}

html body #about .about-portrait .portrait-tech-frame {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1.08 / 1 !important;
  overflow: hidden !important;
  clip-path: polygon(1% 0,100% 0,99% 100%,0 99%) !important;
  -webkit-clip-path: polygon(1% 0,100% 0,99% 100%,0 99%) !important;
}

html body #about .about-portrait #profilePhoto {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  /* The character is on the right of the supplied illustration. */
  object-position: 100% 48% !important;
  transform: none !important;
}

@media (min-width: 761px) {
  html body #about .about-section {
    display: grid !important;
    grid-template-columns: minmax(270px, min(43vw, 560px)) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    column-gap: clamp(26px, 4.5vw, 78px) !important;
    align-items: center !important;
    padding: clamp(90px, 10vh, 130px) clamp(30px, 5vw, 96px) !important;
    box-sizing: border-box !important;
    min-height: 100% !important;
  }
  html body #about .about-portrait {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-height: min(72vh, 640px) !important;
    align-self: center !important;
    justify-self: center !important;
    margin: 0 !important;
  }
  html body #about .about-content {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

@media (max-width: 760px) {
  html body #about .about-portrait {
    width: min(88%, 440px) !important;
    height: auto !important;
    max-width: 440px !important;
    align-self: center !important;
    justify-self: center !important;
    margin: 0 auto !important;
  }
  html body #about .about-portrait .portrait-tech-frame {
    aspect-ratio: 1 / 1.1 !important;
  }
}