.jr-hero {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(440px, 1.15fr);
  gap: clamp(42px, 6vw, 100px);
}

.jr-gallery {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  perspective: 1200px;
}

.jr-shot {
  position: relative;
  overflow: hidden;
  min-height: 155px;
  margin: 0;
  border: 1px solid rgba(137, 184, 202, .24);
  border-radius: 18px;
  background: #091017;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.jr-shot--main {
  grid-column: 1 / -1;
  min-height: clamp(260px, 34vh, 420px);
}

.jr-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .9;
  transition: transform .6s ease, opacity .3s ease;
}

.jr-shot:hover img { transform: scale(1.035); opacity: 1; }
.jr-shot figcaption { position: absolute; left: 14px; bottom: 12px; padding: 7px 10px; border: 1px solid rgba(177, 221, 232, .18); border-radius: 10px; background: rgba(3, 8, 12, .78); color: #dcebf0; font-size: 11px; backdrop-filter: blur(12px); }

@media (max-width: 1050px) {
  .jr-hero { grid-template-columns: 1fr; padding-top: 120px; }
  .jr-gallery { width: 100%; }
}

@media (max-width: 620px) {
  .jr-gallery { grid-template-columns: 1fr; }
  .jr-shot, .jr-shot--main { grid-column: auto; min-height: 190px; }
}