/* Your hunt / Your stay: full bleed band of three equal columns.
   lodge.jpg is a 768 x 576 placeholder, so the band is capped at 1860px
   and centred: three equal columns then stay under 620px each, which
   keeps the photo from upscaling badly on very wide screens. */

.hs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1860px;
  margin-inline: auto;
}

/* Image column */

.hs__media {
  position: relative;
  margin: 0;
  min-height: 100%;
}

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

.hs__media-label {
  position: absolute;
  left: 1.5rem;
  bottom: 1.25rem;
  color: var(--on-dark);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Panels */

.hs__panel {
  padding: 4.5rem 3.25rem;
}

.hs__panel--hunt {
  background-color: var(--forest);
  color: var(--on-dark);
}

.hs__panel--stay {
  background-color: var(--tan);
  color: var(--ink);
}

.hs__num {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--gold);
  margin-bottom: 1.5rem;
}

.hs__num--muted {
  color: var(--ink-muted);
}

.hs__heading {
  font-size: clamp(1.75rem, 2.2vw, 2.25rem);
  margin-bottom: 1.25rem;
}

.hs__panel--hunt .hs__body {
  color: var(--on-dark-muted);
}

.hs__panel--stay .hs__body {
  color: var(--ink-muted);
}

.hs__list {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
}

.hs__list li {
  border-top: 1px solid var(--hairline-dark);
  padding: 0.9375rem 0;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hs__list--light li {
  border-top-color: var(--hairline-light);
}

.hs__panel--stay .link-gold {
  margin-top: 1.75rem;
}

@media (max-width: 991.98px) {
  .hs__grid {
    grid-template-columns: 1fr;
  }

  .hs__media {
    height: 320px;
    min-height: 0;
  }

  .hs__panel {
    padding: 3.5rem var(--gutter);
  }
}