.hero { padding-top:5px; }
.hero-picture { display:block; aspect-ratio:1000/560; overflow:hidden; margin-bottom: 30px;}
.hero__visual { display:block; width:100%; height:100%; object-fit:cover; }

.site-cards__inner {
  display:grid;
  grid-template-columns:repeat(var(--card-count, 1), 232px);
  justify-content:center;
  gap:24px;
  margin-bottom: 60px;
}
.site-card {
  display:block;
  position:relative;
  z-index:1;
  overflow:hidden;
  aspect-ratio:3/4;
  transform-origin:center;
  transition:transform .6s var(--ease), box-shadow .6s var(--ease);
}
.site-card picture {
  display:block;
  width:100%;
  height:100%;
}
.site-card__image {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease), filter .7s var(--ease);
  border: 1px solid #cfcfcf;
}

@media (hover:hover) and (pointer:fine) {
  .site-card:hover {
    z-index:5;
    transform:scale(1.15);
    box-shadow:0 20px 42px rgba(0,0,0,.16);
    border: 1px solid #cfcfcf;
    opacity:.8;
  }
  .site-card:hover .site-card__image {
    transform:scale(1.02);
    filter:brightness(.98);
  }
}

.js-reveal { opacity:1; transform:none; }

@media (max-width:767px) {
  .hero { padding-top:10px; }
  .hero-picture { aspect-ratio:1534/2200; }
  .site-cards__title { margin-bottom:24px; font-size:28px; }
  .site-cards__inner { display:flex; flex-direction:column; gap:24px; }
  .site-card { width:100%; aspect-ratio:16/9; }
  .js-reveal {
    opacity:0;
    transform:translateY(32px);
    transition:opacity .7s ease-out, transform .7s cubic-bezier(.22, 1, .36, 1);
    will-change:opacity, transform;
  }
  .js-reveal.is-visible { opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .site-card,.site-card__image,.js-reveal { transition:none; }
  .js-reveal { opacity:1; transform:none; }
}