.about-page { background: #f8f6f2; }
.about-page .nav-bar nav a.active { color: #7d6554; }

.about-hero { width: 100%; aspect-ratio: 1920 / 502; overflow: hidden; background: #d5c6b7; }
.about-hero img { width: 100%; height: 100%; object-fit: cover; }

.breadcrumb { min-height: 116px; display: flex; align-items: center; gap: 13px; color: #6f6861; font: 11px/1.3 Georgia, "Times New Roman", serif; }
.breadcrumb a { width: 22px; height: 22px; display: grid; place-items: center; color: #c0c1be; transition: color .2s ease; }
.breadcrumb a:hover { color: #7c6858; }
.breadcrumb svg { width: 17px; height: 17px; fill: currentColor; }

.about-intro { display: grid; grid-template-columns: 620px 950px; gap: 110px; align-items: start; padding-top: 2px; }
.about-copy { padding-top: 61px; }
.about-copy h1 { margin-bottom: 22px; color: #171715; font: 400 38px/1.2 "Helvetica Neue", Arial, sans-serif; }
.about-copy p { margin-bottom: 8px; color: #5d5853; font: 14px/2.05 "Helvetica Neue", Arial, sans-serif; }
.about-intro > img { width: 100%; height: 626px; object-fit: cover; }

.philosophy { display: grid; grid-template-columns: 466px 464px minmax(0, 1fr); column-gap: 26px; align-items: center; margin-top: 82px; }
.philosophy > img { width: 100%; height: 602px; object-fit: cover; }
.philosophy-copy { margin-left: 94px; }
.philosophy h2, .brand-spirit h2 { margin-bottom: 28px; color: #171715; font: 400 31px/1.25 "Helvetica Neue", Arial, sans-serif; letter-spacing: .01em; }
.philosophy p { margin-bottom: 8px; color: #5d5853; font: 14px/2.05 "Helvetica Neue", Arial, sans-serif; }

.brand-spirit { padding-top: 94px; padding-bottom: 72px; }
.brand-spirit-copy { max-width: 1400px; margin: 0 auto; text-align: center; }
.brand-spirit h2 { margin-bottom: 19px; }
.brand-spirit p { margin: 0; color: #5d5853; font: 14px/1.9 "Helvetica Neue", Arial, sans-serif; }
.spirit-visual { margin-top: 63px; overflow: hidden; }
.spirit-visual img { width: 100%; aspect-ratio: 1680 / 690; object-fit: cover; }

@media (max-width: 1700px) {
  .about-intro { grid-template-columns: minmax(0, 39%) minmax(0, 1fr); gap: 6.5%; }
  .about-intro > img { height: auto; aspect-ratio: 950 / 626; }
  .philosophy { grid-template-columns: 1fr 1fr 1.28fr; }
  .philosophy > img { height: auto; aspect-ratio: 466 / 602; }
  .philosophy-copy { margin-left: 8%; }
}

@media (max-width: 1100px) {
  .about-hero { min-height: 330px; }
  .about-hero img { object-position: center; }
  .about-intro { gap: 5%; }
  .about-copy { padding-top: 10px; }
  .about-copy h1 { font-size: 32px; }
  .about-copy p, .philosophy p { font-size: 13px; line-height: 1.8; }
  .philosophy { grid-template-columns: 1fr 1fr; row-gap: 46px; }
  .philosophy-copy { grid-column: 1 / -1; margin-left: 0; max-width: 760px; }
}

@media (max-width: 760px) {
  .about-hero { aspect-ratio: auto; height: 62vw; min-height: 260px; }
  .about-hero img { object-position: 58% center; }
  .breadcrumb { min-height: 78px; }
  .about-intro { grid-template-columns: 1fr; gap: 35px; padding-top: 0; }
  .about-copy { order: 2; }
  .about-intro > img { order: 1; }
  .about-copy h1 { font-size: 30px; }
  .philosophy { margin-top: 58px; gap: 12px; }
  .philosophy-copy { padding-top: 28px; }
  .philosophy h2, .brand-spirit h2 { font-size: 25px; }
  .brand-spirit { padding-top: 65px; padding-bottom: 54px; }
  .brand-spirit-copy { text-align: left; }
  .spirit-visual { margin-top: 38px; }
}

@media (max-width: 460px) {
  .about-hero { height: 72vw; }
  .about-intro > img { aspect-ratio: 1.25; }
  .philosophy { grid-template-columns: 1fr; }
  .philosophy-copy { grid-column: auto; }
}