/* ============================================================
   HELIOCASTLE — MORE POSSIBILITIES
   Four short examples of other things a website can be. The art in
   each card is a mockup from css/mockups/.
   ============================================================ */

.poss-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 26px;
  margin-bottom: clamp(22px, 2.6vw, 32px);
}
.poss-head h3 {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}
.poss-head p {
  font-size: 14px;
  color: var(--muted);
}

.poss-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
}

.poss {
  display: block;
  border: 1px solid transparent;
  transition: transform 0.6s var(--ease), border-color 0.4s;
}
.poss:hover { transform: translateY(-6px); border-color: rgb(var(--accent-rgb) / 0.22); }

.poss-art {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #0a0a0c;
  border: 1px solid var(--line);
}
.poss:hover .poss-art { border-color: transparent; }
/* the mockups are absolutely positioned inside their frame */
.poss-art .mock { transition: transform 0.9s var(--ease); }
.poss:hover .mock { transform: scale(1.04); }

.poss-body { padding: 14px 2px 0; }
.poss-body h4 {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: color 0.3s;
}
.poss:hover .poss-body h4 { color: var(--gold); }
.poss-body p {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 5px;
  line-height: 1.6;
}