/* Illustrated reasons to stay, followed by the people behind it. */
.about.about-moments { padding: 0 0 clamp(72px, 7vw, 112px); background: #fff; }
.stay-qualities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0 0 6px; list-style: none; }
.stay-quality { position: relative; min-width: 0; padding: 0 clamp(24px, 3.2vw, 50px) 24px; text-align: center; }
.stay-quality + .stay-quality::before { content: ""; position: absolute; width: 1px; inset: 8px auto 12px 0; background: linear-gradient(transparent, #e5e1d8 15%, #e5e1d8 85%, transparent); }
.stay-quality::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 28px; height: 1px; background: var(--gold); opacity: .5; transform: translateX(-50%); }
.stay-illustration { display: block; width: 236px; max-width: 100%; height: 144px; margin: 0 auto 24px; fill: none; stroke: #a57d3b; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.stay-illustration .art-soft { stroke: #c6af84; }
.stay-illustration .art-fill { fill: #faf8f3; stroke: none; }
.stay-quality h3 { margin-bottom: 13px; font-family: var(--serif); font-size: 28px; font-weight: 500; line-height: 1.15; letter-spacing: -.015em; text-wrap: balance; }
.stay-quality p { max-width: 290px; margin-inline: auto; color: var(--body-text); font-size: 15px; font-weight: 300; line-height: 23px; text-wrap: pretty; }
.moments-hosts { display: grid; grid-template-columns: 185px minmax(0, 1fr) auto; align-items: center; gap: 48px; margin-top: 42px; padding-top: 34px; border-top: 1px solid #e4e3de; }
.moments-location strong { display: flex; align-items: baseline; gap: 6px; font-family: var(--serif); font-size: 70px; font-weight: 400; line-height: .9; letter-spacing: -.04em; color: var(--gold); }
.moments-location strong span { font-size: 29px; letter-spacing: 0; }
.moments-location > span { display: block; margin-top: 12px; font-size: 10px; font-weight: 400; line-height: 18px; letter-spacing: .06em; color: var(--small-text); }
.moments-hosts-copy { max-width: 690px; }
.moments-hosts-copy h3 { margin-bottom: 10px; font-family: var(--serif); font-size: 27px; font-weight: 500; line-height: 1.18; }
.moments-hosts-copy p { font-size: 15px; font-weight: 300; line-height: 23px; color: var(--body-text); }
.moments-hosts .text-link { gap: 22px; white-space: nowrap; align-self: center; }
.moments-hosts .text-link svg { width: 19px; height: 19px; fill: none; stroke: var(--gold); stroke-width: 1.25; transition: transform .25s ease; }
.moments-hosts .text-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
@media (hover: hover) and (pointer: fine) {
  .moments-hosts .text-link:hover svg { transform: translate(2px, -2px); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .stay-illustration { transition: transform .45s cubic-bezier(.2, .65, .3, 1), stroke .3s ease; }
  .stay-quality::after { transition: width .4s ease, opacity .4s ease; }
  .stay-quality:hover .stay-illustration { transform: translateY(-5px); stroke: #8b692f; }
  .stay-quality:hover::after { width: 56px; opacity: .9; }
}
@media (max-width: 1100px) {
  .stay-quality { padding-inline: 18px; }
  .moments-hosts { grid-template-columns: 155px minmax(0, 1fr); gap: 24px 36px; }
  .moments-hosts .text-link { grid-column: 2; justify-self: start; }
}
@media (max-width: 760px) {
  .stay-qualities { grid-template-columns: minmax(0, 1fr); padding: 2px 0 0; }
  .stay-quality { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; column-gap: 18px; padding: 25px 0; text-align: left; }
  .stay-quality + .stay-quality { border-top: 1px solid #e9e6df; }
  .stay-quality::after, .stay-quality + .stay-quality::before { display: none; }
  .stay-quality:first-child { padding-top: 0; }
  .stay-quality:last-child { padding-bottom: 0; }
  .stay-illustration { width: 112px; max-width: none; height: 88px; margin: 0 0 0 -10px; }
  .stay-quality h3 { font-size: 28px; margin-bottom: 8px; }
  .stay-quality p { max-width: none; }
  .moments-hosts { grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 36px; padding-top: 28px; }
  .moments-location { display: flex; align-items: center; gap: 22px; }
  .moments-location strong { font-size: 58px; }
  .moments-location strong span { font-size: 25px; }
  .moments-location > span { margin-top: 0; max-width: 130px; }
  .moments-hosts-copy h3 { font-size: 27px; max-width: 310px; }
  .moments-hosts-copy p { font-size: 16px; line-height: 25px; }
  .moments-hosts .text-link { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .moments-hosts .text-link svg { transition: none; transform: none; }
}