.heroImage {
  background-image: linear-gradient(90deg, #03090f 0%, #06101ad9 32%, #0000 75%), linear-gradient(#0000 55%, #03080dcc), url('./loft-winter.jpg');
}

.venueGrid {
  grid-template-columns: repeat(3, 1fr);
}

.photoRail {
  grid-template-columns: 1.35fr 0.95fr 0.9fr 0.8fr 1.1fr;
}

.photoRail figure:nth-child(5) {
  height: 360px;
}

.venuePhotoText {
  color: #dffcff;
  background: radial-gradient(circle at 18% 25%, #79d8df 0 2px, transparent 3px), linear-gradient(135deg, #19353c, #0b1216 72%);
  display: grid;
  place-items: center;
}

.venuePhotoText span {
  letter-spacing: .22em;
  font-size: 30px;
  font-weight: 800;
}

.weatherBadge {
  z-index: 2;
  color: #081013;
  text-align: center;
  letter-spacing: .08em;
  background: var(--ice);
  border: 2px solid #fff9;
  border-radius: 50%;
  place-items: center;
  width: 96px;
  height: 96px;
  padding: 12px;
  font-size: 9px;
  line-height: 1.25;
  display: grid;
  position: absolute;
  top: 14px;
  right: 14px;
  box-shadow: 0 12px 30px #0007;
}

.playGrid {
  grid-template-columns: 2fr repeat(4, 1fr);
}

.playGrid .tubing { background-image: url('./activity-tubing.webp'); }
.playGrid .huskies { background-image: url('./activity-huskies.webp'); }
.playGrid .wheel { background-image: url('./activity-wheel.webp'); }
.playGrid .streetPrograms { background-image: url('./activity-street-programs-winter.webp'); background-position: 50% 38%; }
.playGrid .ice .weatherBadge { top: 18px; right: 18px; }

.parkCard {
  background-image: linear-gradient(90deg, #10181bf7 0%, #10181bea 48%, #10181bb3 100%), url('./park-map-clean.webp');
}

.giftBlock {
  grid-column: 1 / -1;
  background: #10181b;
  color: #fff;
  border-radius: 22px;
  margin-top: 18px;
  padding: 24px 28px;
  box-shadow: 10px 12px 24px #a8713c66;
}

.giftBlock h3 {
  margin: 10px 0 8px;
  font-size: 24px;
}

.giftBlock p { color: #b9c4c5; line-height: 1.6; }

.orb {
  background: linear-gradient(90deg, #0a1114 0%, #0000 35%), url('./cta-rink-wheel.webp') 65% / cover;
}

@media (width <= 900px) {
  .venueGrid { grid-template-columns: 1fr 1fr; }
  .playGrid { grid-template-columns: 1fr 1fr; }
}

@media (width <= 560px) {
  .venueGrid, .playGrid { grid-template-columns: 1fr; }
  .weatherBadge { width: 82px; height: 82px; font-size: 8px; }
}
