.about-section {
  isolation: isolate;
  overflow: hidden;
  position: relative;
  margin-top: 0;
  padding-top: 8rem;
  background: var(--paper-deep);
}

.about-section::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: url("assets/ancient-theater-background.png") 72% center / cover no-repeat;
  filter: saturate(.55) sepia(.16) contrast(.86);
  opacity: .68;
  mix-blend-mode: multiply;
  transform: scale(var(--about-scale, 1));
  transform-origin: 70% center;
  transition: transform .12s linear;
}

.about-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(233,231,224,.9) 0%, rgba(233,231,224,.76) 35%, rgba(233,231,224,.4) 68%, rgba(233,231,224,.18) 100%), linear-gradient(0deg, rgba(233,231,224,.42), transparent 40%);
}

.about-section .about-grid {
  position: relative;
}

.hero-room {
  transform: scale(var(--studio-scale, 1));
  transform-origin: 60% 55%;
  transition: transform .12s linear;
}

.about-section .portrait-placeholder {
  box-shadow: 18px 18px 0 rgba(233,231,224,.48);
}

.about-section .about-grid > div:last-child {
  align-self: center;
  padding: 2rem 2.2rem;
  background: rgba(242,241,237,.42);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

@media (max-width:700px) {
  .about-section { margin-top: 0; padding-top: 6rem; }
  .about-section::before { background-position: 64% center; opacity: .53; }
  .about-section .about-grid > div:last-child { padding: 1.5rem 0; background: transparent; }
}