/* Fine Life — templateStyle2 pack 15.
 *
 * The client's own stylesheet, carried over rule for rule. Two changes only:
 *
 *   - `@import "tailwindcss"` is dropped. Packs have no build step, so there
 *     is nothing to compile the import; and the 208 rules below are
 *     hand-written CSS that never used a utility class, so all the import
 *     supplied was Preflight. The handful of resets that actually mattered
 *     are restated at the top.
 *   - the fixed pixel tilt values are left alone: this pack has no 3D stage,
 *     so the --mo-par system does not apply to it.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}
img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:root {
  --burgundy: #741424;
  --ink: #941d32;
  --red: #d51e26;
  --yellow: #f6c617;
  --cream: #f3efe7;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--red) #f7dd9b;
}
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--cream);
  color: var(--ink);
  font-family: Arial, sans-serif;
}
button,
a {
  font: inherit;
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease,
    opacity 0.25s ease;
}
button {
  cursor: pointer;
}
input,
select,
textarea {
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease;
}
*:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 4px;
}
::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
::-webkit-scrollbar-track {
  background: #f7dd9b;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--red), var(--burgundy));
  border: 2px solid #f7dd9b;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--burgundy);
}
img {
  display: block;
  width: 100%;
}
section {
  scroll-margin-top: 75px;
}
header {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto;
  height: 78px;
  padding: 0 4vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #741424f2;
  color: #fff;
  border-bottom: 1px solid #ffffff22;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: 0.1em;
}
.brand > b {
  width: 42px;
  height: 42px;
  border: 2px solid var(--yellow);
  color: var(--yellow);
  display: grid;
  place-items: center;
}
.brand small {
  display: block;
  font-size: 9px;
  color: var(--yellow);
  margin-top: 4px;
}
nav {
  display: flex;
  align-items: center;
  gap: 2vw;
}
nav a,
nav button {
  border: 0;
  background: none;
  color: #ddd;
  text-decoration: none;
  font-size: 13px;
  font-weight: bold;
  white-space: nowrap;
}
nav a:hover {
  color: var(--yellow);
  transform: translateY(-2px);
}
nav button:hover {
  color: var(--yellow);
  transform: translateY(-2px);
}
nav .book {
  background: var(--red);
  padding: 14px 20px;
  color: #fff;
}
nav .book:hover {
  background: var(--yellow);
  color: #68101f;
  box-shadow: 0 10px 25px #4d0b1744;
}
.brand:hover {
  color: var(--yellow);
  transform: translateY(-2px);
}
.brand:hover > b {
  background: var(--yellow);
  color: #68101f;
}
.hamb {
  display: none;
  background: none;
  border: 0;
  color: #fff;
  font-size: 24px;
}
.hero {
  min-height: 780px;
  padding: 120px 4vw 45px;
  background: var(--burgundy);
  color: #fff;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  overflow: hidden;
}
.heroCopy {
  padding: 35px 5vw 0 1vw;
  z-index: 2;
}
.eyebrow,
.num,
.hero small,
.light > small,
.modal > small {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.eyebrow {
  color: #ccc;
}
.hero h1,
.light h2,
.dark h2,
.cta h2 {
  font-size: clamp(48px, 6vw, 96px);
  line-height: 0.88;
  letter-spacing: -0.06em;
  margin: 28px 0;
}
.hero h1 em,
.light h2 em,
.dark h2 em,
.cta h2 em {
  font-family: Georgia, serif;
  color: var(--yellow);
  font-weight: 400;
}
.heroCopy > p:not(.eyebrow) {
  color: #aaa;
  max-width: 580px;
  line-height: 1.65;
  font-size: 17px;
}
.actions {
  display: flex;
  gap: 28px;
  align-items: center;
  margin: 30px 0;
}
.actions a {
  color: #fff;
  font-size: 13px;
}
.actions a:hover {
  color: var(--yellow);
  transform: translateX(4px);
}
.primary {
  display: inline-block;
  border: 0;
  background: var(--red);
  color: #fff;
  padding: 17px 22px;
  text-decoration: none;
  font-weight: 800;
}
.primary:hover {
  filter: brightness(1.13);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px #74142444;
}
.primary:active,
.outline:active,
button:active {
  transform: translateY(1px) scale(0.98);
}
.proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid #ffffff22;
  padding-top: 24px;
}
.proof span {
  font-size: 10px;
  color: #888;
  text-transform: uppercase;
  border-right: 1px solid #ffffff22;
}
.proof span:last-child {
  border: 0;
}
.proof b {
  display: block;
  color: #fff;
  font-size: 23px;
  margin-bottom: 4px;
}
.heroImage {
  position: relative;
  min-height: 610px;
}
.heroSlides {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.heroSlides img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.78) contrast(1.12);
  opacity: 0;
  transform: scale(1.08);
  animation: heroFilm 15s infinite;
}
.heroSlides img:nth-child(2) {
  animation-delay: 5s;
}
.heroSlides img:nth-child(3) {
  animation-delay: 10s;
}
@keyframes heroFilm {
  0% {
    opacity: 0;
    transform: scale(1.08);
  }
  7%,
  28% {
    opacity: 1;
  }
  33%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
.heroImage:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--burgundy), transparent 35%);
}
.heroImage label {
  position: absolute;
  z-index: 2;
  right: 0;
  top: 0;
  background: var(--yellow);
  color: #68101f;
  padding: 18px 12px;
  writing-mode: vertical-rl;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
}
.rating {
  position: absolute;
  z-index: 3;
  left: -25px;
  bottom: 55px;
  background: #fff;
  color: #68101f;
  padding: 17px 22px;
  display: flex;
  gap: 12px;
  box-shadow: 0 18px 50px #74142466;
}
.rating > b {
  font-size: 29px;
}
.rating span {
  color: var(--red);
  font-size: 12px;
}
.rating small {
  display: block;
  color: #555;
  margin-top: 5px;
}
.ticker {
  background: var(--red);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  padding: 16px;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
}
.light,
.dark {
  padding: 105px 5vw;
}
.dark {
  background: var(--ink);
  color: #fff;
}
.about {
  display: grid;
  grid-template-columns: 0.5fr 1.25fr 1fr;
  gap: 5vw;
}
.num {
  color: var(--red);
}
.light h2,
.dark h2 {
  font-size: clamp(42px, 5vw, 75px);
  margin: 13px 0;
}
.light h2 em {
  color: var(--red);
}
.copy {
  padding-top: 45px;
}
.copy p,
.sectionHead > p,
.locationCopy > p {
  line-height: 1.7;
  color: #5f5d59;
}
.outline {
  border: 1px solid currentColor;
  background: transparent;
  padding: 15px 19px;
  font-weight: bold;
  margin-top: 15px;
  /* Element-agnostic on purpose. The reset at the top of this file gives
     `font: inherit; color: inherit` to button/input/select/textarea but NOT to
     anchors, so an <a class="outline"> — which is what the offer CTAs are,
     because they navigate to #enquire — fell through to the browser default and
     rendered as blue underlined text inside the border. */
  color: inherit;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}
.outline:hover {
  background: var(--yellow);
  border-color: var(--yellow);
  color: #68101f;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px #7414242b;
}
.sectionHead {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 50px;
}
.sectionHead > p {
  max-width: 360px;
  color: #999;
}
.rooms {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 17px;
}
.rooms article {
  height: 490px;
  position: relative;
  overflow: hidden;
  background: #a4293d;
}
.rooms img {
  height: 100%;
  object-fit: cover;
  transition: 0.5s;
}
.rooms article:hover img {
  transform: scale(1.05);
}
.rooms article:after {
  content: '';
  position: absolute;
  inset: 35% 0 0;
  background: linear-gradient(transparent, #68101f);
}
.rooms article > div {
  position: absolute;
  z-index: 2;
  bottom: 24px;
  left: 24px;
}
.rooms small {
  color: var(--yellow);
  font-weight: bold;
  letter-spacing: 0.12em;
}
.rooms h3 {
  font-size: 27px;
  margin: 8px 0;
}
.rooms p {
  color: #bbb;
}
.rooms button {
  color: #fff;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--yellow);
  padding: 0 0 5px;
}
.rooms button:hover {
  color: var(--yellow);
  transform: translateX(5px);
  border-bottom-color: #fff;
}
.note {
  font-size: 11px;
  color: #777;
}
/* Amenity tiles, compact.
   Four across instead of three, and each tile is roughly half its old height:
   260px of minimum height with a 43px glyph was sized for a handful of tiles,
   and Fine Life declares fourteen — which ran the section to five tall rows
   and pushed everything below it off the page. The glyph, the headings and the
   padding all come down together so the proportions inside the tile hold. */
.amenities {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid #c8c3b9;
}
.amenities article {
  padding: 16px 18px;
  min-height: 138px;
  border-right: 1px solid #c8c3b9;
  border-bottom: 1px solid #c8c3b9;
  transition: 0.3s;
}
.amenities article:hover {
  background: var(--yellow);
  transform: translateY(-3px);
}
.amenities article > b {
  display: block;
  font-size: 20px;
  margin: 10px 0 8px;
}
.amenities article > small {
  font-size: 11px;
}
.amenities h3 {
  font-size: 15px;
  margin: 0 0 4px;
  line-height: 1.25;
}
.amenities p {
  color: #65625e;
  line-height: 1.45;
  font-size: 12.5px;
  margin: 0;
}
.offers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--yellow);
  color: #68101f;
}
.offers article {
  padding: 65px 6vw;
  min-height: 420px;
}
.offers article:first-child {
  border-right: 1px solid #68101f55;
}
.offers small {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
}
.offers strong {
  display: block;
  margin: 18px 0 5px;
  font-size: clamp(70px, 9vw, 130px);
  line-height: 0.9;
  letter-spacing: -0.07em;
}
.offers strong em {
  font-family: Georgia, serif;
  font-size: 0.22em;
  letter-spacing: 0;
}
.offers h3 {
  font-size: 28px;
  margin: 18px 0 10px;
}
.offers p {
  max-width: 520px;
  line-height: 1.65;
}
.stayOffer {
  background: var(--red);
  color: #fff;
}
.stayOffer .primary {
  margin-top: 15px;
}
.nearby {
  background: #fff8ec;
}
.nearbyGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #c8c3b9;
  border-left: 1px solid #c8c3b9;
}
.nearbyGrid article {
  min-height: 390px;
  padding: 30px;
  border-right: 1px solid #c8c3b9;
  border-bottom: 1px solid #c8c3b9;
}
.nearbyGrid article:nth-child(even) {
  background: var(--yellow);
}
.nearbyGrid span {
  color: var(--red);
  font-weight: 900;
  font-size: 12px;
}
.nearbyGrid h3 {
  margin: 70px 0 22px;
  font-size: 25px;
}
.nearbyGrid ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nearbyGrid li {
  padding: 11px 0;
  border-bottom: 1px solid #68101f30;
  line-height: 1.4;
}
.gallery {
  display: grid;
  grid-template-columns: 0.6fr 1.4fr;
  gap: 5vw;
}
.gallery > div:first-child {
  position: sticky;
  top: 120px;
  height: max-content;
}
.galleryGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.galleryGrid button {
  border: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  background: #a4293d;
}
.galleryGrid button:first-child {
  grid-column: 1/-1;
}
.galleryGrid img {
  height: 310px;
  object-fit: cover;
  transition: 0.5s;
}
.galleryGrid button:first-child img {
  height: 430px;
}
.galleryGrid button:hover img {
  transform: scale(1.04);
  filter: brightness(0.8);
}
.galleryGrid button:hover {
  box-shadow: 0 18px 45px #4d0b1755;
  transform: translateY(-4px);
}
.galleryGrid button:hover span {
  background: #fff;
  transform: rotate(8deg);
}
.galleryGrid span {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: var(--yellow);
  padding: 9px;
  font-weight: bold;
}
.location {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 7vw;
}
.mapCard {
  background: var(--red);
  color: #fff;
  min-height: 550px;
  padding: 40px;
  position: relative;
  overflow: hidden;
}
.mapCard .num {
  color: var(--yellow);
}
.mapCard:after,
.mapCard:before {
  content: '';
  position: absolute;
  width: 140%;
  height: 2px;
  background: #fff;
  left: -30%;
  bottom: 130px;
  transform: rotate(24deg);
}
.mapCard:before {
  transform: rotate(-19deg);
  bottom: 230px;
}
.pin {
  position: absolute;
  z-index: 2;
  left: 54%;
  bottom: 155px;
  width: 80px;
  height: 80px;
  background: var(--yellow);
  color: #68101f;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: grid;
  place-items: center;
  text-align: center;
  font-weight: 900;
}
.locationCopy {
  padding-top: 65px;
}
.locationCopy h3 {
  font-size: 34px;
}
.locationCopy ul {
  list-style: none;
  padding: 0;
  margin: 35px 0;
  border-top: 1px solid #bbb;
}
.locationCopy li {
  padding: 17px 0;
  border-bottom: 1px solid #bbb;
  display: flex;
  justify-content: space-between;
}
.locationCopy li b {
  color: var(--red);
  font-size: 12px;
}
.locationCopy li {
  transition:
    padding 0.25s ease,
    background-color 0.25s ease;
}
.locationCopy li:hover {
  padding-left: 12px;
  padding-right: 12px;
  background: #f6c6172b;
}
.cta {
  text-align: center;
  padding: 105px 20px;
  background: var(--red);
  color: #fff;
}
.cta h2 {
  margin: 20px;
}
.cta div {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.yellow {
  background: var(--yellow);
  color: #68101f;
}
.cta .outline {
  margin: 0;
}
footer {
  background: #741424;
  color: #fff;
  padding: 55px 5vw 30px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
}
footer p {
  color: #888;
}
footer > div {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
footer > div a {
  color: #fff;
}
footer > div a:hover {
  color: var(--yellow);
  transform: translateX(5px);
}
footer > small {
  grid-column: 1/-1;
  border-top: 1px solid #f2bcc5;
  padding-top: 25px;
  color: #666;
}
.backdrop,
.lightbox {
  position: fixed;
  z-index: 100;
  inset: 0;
  background: #741424e8;
  display: grid;
  place-items: center;
  padding: 20px;
}
.modal {
  width: min(520px, 100%);
  max-height: 92vh;
  overflow: auto;
  background: var(--cream);
  padding: 40px;
  position: relative;
}
.close {
  position: absolute;
  right: 16px;
  top: 9px;
  border: 0;
  background: none;
  font-size: 34px;
}
.close:hover,
.lightbox button:hover {
  color: var(--yellow);
  transform: rotate(90deg) scale(1.08);
}
.modal h2 {
  font-size: 38px;
  margin: 8px 0 25px;
}
.modal form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.modal label {
  font-size: 12px;
  font-weight: bold;
}
.modal input,
.modal select,
.modal textarea {
  width: 100%;
  display: block;
  margin-top: 7px;
  padding: 13px;
  border: 1px solid #bbb;
  background: #fff;
}
.modal input:hover,
.modal select:hover,
.modal textarea:hover,
.modal input:focus,
.modal select:focus,
.modal textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px #d51e261c;
}
.modal label:nth-last-child(2),
.modal form > button {
  grid-column: 1/-1;
}
.success {
  text-align: center;
}
.success > b {
  display: grid;
  place-items: center;
  width: 65px;
  height: 65px;
  margin: auto;
  border-radius: 50%;
  background: var(--yellow);
  font-size: 28px;
}
.lightbox {
  color: #fff;
}
.lightbox img {
  max-width: 1000px;
  max-height: 80vh;
  object-fit: contain;
  pointer-events: none;
}
.lightbox button {
  position: absolute;
  top: 15px;
  right: 25px;
  color: #fff;
  border: 0;
  background: none;
  font-size: 42px;
}
.lightbox p {
  position: absolute;
  bottom: 5px;
}
.motionTour {
  position: relative;
  min-height: 660px;
  background: #741424;
  color: #fff;
  overflow: hidden;
  padding: 95px 0;
}
.tourCopy {
  position: relative;
  z-index: 3;
  width: min(520px, 90vw);
  margin-left: 5vw;
  background: #8d1a2eee;
  border: 1px solid #ffffff22;
  padding: 45px;
}
.tourCopy .play {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--yellow);
  color: #68101f;
  margin-bottom: 25px;
}
.tourCopy p,
.galleryCount {
  color: var(--yellow);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
}
.tourCopy h2 {
  font-size: clamp(42px, 5vw, 72px);
  line-height: 0.92;
  letter-spacing: -0.05em;
  margin: 15px 0 30px;
}
.tourCopy h2 em {
  font-family: Georgia, serif;
  color: var(--red);
  font-weight: 400;
}
.filmStrip {
  position: absolute;
  inset: 0 0 0 38%;
  display: flex;
  gap: 14px;
  width: max-content;
  animation: filmMove 34s linear infinite;
}
.filmStrip figure {
  width: 330px;
  height: 470px;
  margin: 70px 0 0;
  position: relative;
  transform: rotate(2deg);
  overflow: hidden;
  border: 1px solid #ffffff22;
}
.filmStrip figure:nth-child(even) {
  margin-top: 130px;
  transform: rotate(-2deg);
}
.filmStrip img {
  height: 100%;
  object-fit: cover;
}
.filmStrip figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: #741424e8;
  padding: 8px 10px;
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.12em;
}
@keyframes filmMove {
  to {
    transform: translateX(-50%);
  }
}
.galleryCount {
  display: block;
  margin-top: 30px;
}
.galleryGrid button.poster {
  background: #741424;
}
.galleryGrid button.poster img {
  object-fit: contain;
  background: #741424;
}
.rooms {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1050px;
  margin-inline: auto;
}
.terms {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 6vw;
  align-items: start;
}
.termsIntro {
  position: sticky;
  top: 115px;
}
.termsIntro > p:not(.num) {
  color: #aaa;
  font-size: 16px;
  line-height: 1.7;
  max-width: 480px;
}
.termsAlert {
  margin-top: 30px;
  padding: 22px;
  border-left: 5px solid var(--yellow);
  background: #a52b40;
  display: grid;
  gap: 7px;
}
.termsAlert b {
  color: var(--yellow);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
}
.termsAlert span {
  line-height: 1.5;
}
.termsList {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid #ffffff25;
}
.termsList li {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid #ffffff25;
}
.termsList li > span {
  color: var(--yellow);
  font-weight: 900;
  font-size: 12px;
  padding-top: 4px;
}
.termsList p {
  margin: 0;
  color: #d4d4d4;
  line-height: 1.55;
  font-size: 15px;
}

@media (max-width: 900px) {
  header {
    height: 70px;
    padding: 0 20px;
  }
  .hamb {
    display: block;
  }
  nav {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background: #741424;
    padding: 24px 20px;
    flex-direction: column;
    align-items: stretch;
  }
  nav.open {
    display: flex;
  }
  nav a,
  nav button {
    text-align: left;
    padding: 10px 0;
  }
  .hero {
    grid-template-columns: 1fr;
    padding: 100px 20px 20px;
  }
  .heroCopy {
    padding: 15px 0 40px;
  }
  .hero h1 {
    font-size: clamp(49px, 14vw, 75px);
  }
  .actions {
    flex-direction: column;
    align-items: flex-start;
  }
  .heroImage {
    min-height: 500px;
  }
  .motionTour {
    min-height: 760px;
    padding-top: 45px;
  }
  .tourCopy {
    margin: 0 auto;
    padding: 32px;
  }
  .filmStrip {
    inset: 300px 0 0 0;
  }
  .filmStrip figure {
    width: 240px;
    height: 370px;
  }
  .rating {
    left: 12px;
  }
  .light,
  .dark {
    padding: 80px 20px;
  }
  .about,
  .gallery,
  .location {
    grid-template-columns: 1fr;
  }
  .about {
    gap: 10px;
  }
  .copy {
    padding-top: 0;
  }
  .sectionHead {
    align-items: start;
    flex-direction: column;
  }
  .rooms {
    grid-template-columns: 1fr;
  }
  .terms {
    grid-template-columns: 1fr;
  }
  .offers,
  .nearbyGrid {
    grid-template-columns: 1fr 1fr;
  }
  .termsIntro {
    position: static;
  }
  .rooms article {
    height: 430px;
  }
  .amenities {
    grid-template-columns: 1fr 1fr;
  }
  .gallery > div:first-child {
    position: static;
  }
  .galleryGrid button:first-child img {
    height: 310px;
  }
  .locationCopy {
    padding-top: 15px;
  }
  footer {
    grid-template-columns: 1fr;
  }
  .modal form {
    grid-template-columns: 1fr;
  }
  .modal label:nth-last-child(2),
  .modal form > button {
    grid-column: auto;
  }
}
@media (max-width: 560px) {
  .proof {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }
  .proof span:nth-child(2) {
    border: 0;
  }
  .proof span:last-child {
    grid-column: 1/-1;
  }
  .heroImage {
    min-height: 430px;
  }
  .amenities,
  .galleryGrid,
  .offers,
  .nearbyGrid {
    grid-template-columns: 1fr;
  }
  .offers article {
    min-height: auto;
    padding: 55px 22px;
  }
  .offers article:first-child {
    border-right: 0;
  }
  .nearbyGrid article {
    min-height: auto;
  }
  .nearbyGrid h3 {
    margin-top: 35px;
  }
  .galleryGrid button:first-child {
    grid-column: auto;
  }
  .galleryGrid img,
  .galleryGrid button:first-child img {
    height: 290px;
  }
  .mapCard {
    padding: 28px 22px;
    min-height: 480px;
  }
  .cta div {
    flex-direction: column;
  }
  .cta button {
    width: 100%;
  }
  .modal {
    padding: 35px 22px;
  }
}
.nearbyGrid article {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.nearbyGrid article:hover {
  position: relative;
  z-index: 2;
  transform: translateY(-7px);
  box-shadow: 0 20px 45px #74142424;
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
  .heroSlides img:first-child {
    opacity: 1;
  }
}