.hero {
  background:
    linear-gradient(90deg, rgba(8, 38, 36, .9) 0%, rgba(18, 59, 53, .62) 43%, rgba(18, 59, 53, .08) 76%),
    url("images/cabin-from-water.webp") center 56% / cover no-repeat;
}

.brand-mark {
  width: 58px;
  height: 58px;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  mix-blend-mode: screen;
}

.footer-brand .brand-mark { mix-blend-mode: normal; }

.decks { background: #f4f1e9; }
.decks-head { display:grid; grid-template-columns:1.2fr .8fr; gap:9vw; align-items:end; margin-bottom:55px; }
.decks-head h2 { font-size:clamp(45px,5.5vw,82px); letter-spacing:-.035em; }
.decks-head h2 em { color:#9f705b; }
.decks-head > p { color:#536a66; max-width:480px; margin:0 0 8px; }
.deck-gallery { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:230px; gap:18px; }
.deck-photo { position:relative; overflow:hidden; margin:0; grid-column:span 4; background:#c8c0b0; }
.deck-photo.deck-main { grid-column:span 7; grid-row:span 2; }
.deck-photo.deck-wide { grid-column:span 5; }
.deck-photo img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.deck-photo:hover img { transform:scale(1.025); }
.deck-photo:after { content:""; position:absolute; inset:55% 0 0; background:linear-gradient(transparent,rgba(8,38,36,.62)); }
.deck-photo figcaption { position:absolute; left:18px; bottom:15px; z-index:2; color:#fff; font-size:10px; letter-spacing:.12em; text-transform:uppercase; }

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 31, 31, .3), transparent 35%, rgba(8, 38, 36, .32));
}

.hero-content,
.quick-facts {
  z-index: 3;
}

.ocean-card { background: url("images/fire-by-water.webp") center / cover no-repeat; }
.cedar-card { background: url("images/living-room.webp") center / cover no-repeat; }
.hearth-card { background: url("images/dining-nook.webp") center / cover no-repeat; }

.room-gallery {
  min-height: 600px;
  position: relative;
}

.room-photo {
  position: absolute;
  margin: 0;
  overflow: hidden;
  background: #c8c0b0;
  box-shadow: 0 20px 45px rgba(21, 57, 52, .18);
}

.room-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.room-photo figcaption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 8px 13px;
  background: #fff;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.room-photo-main { inset: 0 18% 10% 0; }
.room-photo-small {
  right: 0;
  bottom: 0;
  width: 43%;
  height: 45%;
  border: 8px solid #e4dfd2;
}

.location-photo {
  position: relative;
  min-height: 650px;
  margin: 0;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, .12);
}

.location-photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.location-photo::after {
  content: "";
  position: absolute;
  inset: 50% 0 0;
  background: linear-gradient(transparent, rgba(8, 38, 36, .84));
}

.location-photo figcaption {
  position: absolute;
  z-index: 2;
  right: 8%;
  bottom: 42px;
  left: 8%;
  display: flex;
  flex-direction: column;
}

.location-photo figcaption strong {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
}

.location-photo figcaption span {
  margin-top: 5px;
  color: #d4dfdb;
  font-size: 11px;
}

@media (max-width: 900px) {
  .hero { background-position: 58% center; }
  .room-gallery { min-height: 540px; }
  .location-photo {
    min-height: 470px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }
  .decks-head { grid-template-columns:1fr; gap:24px; }
  .deck-gallery { grid-auto-rows:210px; }
  .deck-photo,.deck-photo.deck-wide { grid-column:span 6; }
  .deck-photo.deck-main { grid-column:span 12; }
}

@media (max-width: 560px) {
  .hero { background-position: 61% center; }
  .room-gallery { min-height: 430px; }
  .room-photo-main { inset: 0 10% 13% 0; }
  .room-photo-small {
    width: 48%;
    height: 43%;
    border-width: 6px;
  }
  .brand-mark { width:48px; height:48px; }
  .deck-gallery { display:block; }
  .deck-photo { height:250px; margin-bottom:14px; }
  .deck-photo.deck-main { height:330px; }
}