.about-visual {
  --about-paper: #f6efe3;
  --about-mat: #fffaf0;
  --about-rust: #864732;
  background: var(--about-paper);
}

.about-visual .about-banner {
  height: clamp(310px, 39vw, 510px);
  align-items: end;
  background: #30372a;
}

.about-visual .about-banner::after {
  background:
    linear-gradient(0deg, #171d13de 0%, #171d1329 60%, transparent 86%),
    linear-gradient(90deg, #171d1361, transparent 70%);
}

.about-heading {
  margin-bottom: clamp(60px, 6vw, 86px);
}

.about-visual .about-heading h1 {
  font-size: clamp(28px, 4vw, 60px);
  line-height: 1.35;
}

.about-visual .about-heading .breadcrumb {
  color: #fff3e1;
}

.about-cover {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.about-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% 36%;
}

.about-story {
  padding-block: clamp(54px, 7vw, 96px);
}

.about-visual .about-editorial {
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(38px, 7vw, 100px);
}

.about-photo {
  width: min(calc(100% - 10px), 510px);
  margin-inline: auto;
  padding: clamp(6px, 1vw, 12px);
  background: var(--about-mat);
  border: 1px solid #dbccb7;
  box-shadow: 10px 10px 0 #e7d7c0;
}

.about-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

.about-visual .about-quote {
  background: #eee3d3;
  border-block: 1px solid #ddccb5;
}

.about-story .eyebrow {
  color: var(--about-rust);
}

.about-visual .about-nearby {
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  border-top: 1px solid #ddccb5;
  margin-top: clamp(46px, 7vw, 90px);
  margin-bottom: 0;
  padding-top: clamp(30px, 5vw, 54px);
}

.about-nearby p {
  max-width: 55ch;
  margin-block: 16px;
}

.about-night {
  width: min(80%, 405px);
}

.about-night img {
  aspect-ratio: auto;
}

@media (max-width: 760px) {
  .about-visual .about-banner {
    height: clamp(240px, 68vw, 340px);
  }

  .about-cover img {
    object-position: 76% 53%;
  }

  .about-visual .about-editorial {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
}

@media print {
  .about-visual {
    background: white;
  }

  .about-photo {
    box-shadow: none;
  }

  .about-visual .about-banner {
    height: auto;
    background: white;
  }

  .about-cover {
    display: none;
  }

  .about-heading {
    margin-bottom: 0;
  }
}