/* Device hardware and sample websites keep their own colors in both themes. */
.about-page :is(.device-screen, .notebook-screen, .phone, .phone-camera) {
  background: #15191e;
  border-color: #454c54;
}
.about-page :is(.device-base, .notebook-base) {
  background: linear-gradient(#dce1e5 0%, #9ba6b0 50%, #d7dce1 60%, #87949f 100%);
}
.about-page :is(.device-base::after, .notebook-base::before) {
  background: #7c8892;
}
.about-page .generic-site {
  color-scheme: light;
  background: #fff;
  color: #273e38;
}
.about-page .generic-nav {
  background: #fff;
}
.about-page .generic-nav > span {
  color: #6c7974;
}
.about-page .generic-hero {
  background:
    linear-gradient(90deg, #eef0e9 15%, rgb(238 240 233 / 93%) 42%, rgb(238 240 233 / 8%) 85%),
    url("../images/office-desktop.webp") center / cover;
}
.about-page .phone .generic-hero {
  background:
    linear-gradient(rgb(238 240 233 / 96%), rgb(238 240 233 / 69%)),
    url("../images/office-desktop.webp") center / cover;
}
.about-page .generic-bottom i {
  background: #e6ebe4;
}
.about-page .generic-bottom i:nth-child(2) {
  background: #d4ded4;
}
.about-page .generic-bottom i:nth-child(3) {
  background: #ede6da;
}

/* Fill the portrait column with proportional cropping, never stretching. */
.about-page .leader > img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;
  align-self: stretch;
}

/* A gradual fade blends the photo into the hero without a visible band. */
.about-page .hero-photo::after {
  background: linear-gradient(90deg,
    var(--hero) 0%,
    color-mix(in srgb, var(--hero) 94%, transparent) 8%,
    color-mix(in srgb, var(--hero) 75%, transparent) 18%,
    color-mix(in srgb, var(--hero) 43%, transparent) 30%,
    color-mix(in srgb, var(--hero) 15%, transparent) 42%,
    transparent 56%);
}
@media (max-width: 540px) {
  .about-page .leader > img[src$="natalia.webp"] {
    object-position: 38% center;
  }
  .about-page .hero-photo::after {
    background: linear-gradient(180deg,
      var(--hero) 0%,
      color-mix(in srgb, var(--hero) 94%, transparent) 5%,
      color-mix(in srgb, var(--hero) 75%, transparent) 12%,
      color-mix(in srgb, var(--hero) 43%, transparent) 21%,
      color-mix(in srgb, var(--hero) 15%, transparent) 30%,
      transparent 42%);
  }
}