/* Panorama — a long strip painting shown edge to edge; narrow screens pan across it */

.panorama {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}
.panorama__frame {
  overflow: hidden;
  background: var(--cocoa-deep);
}
.panorama__image {
  width: 100%;
  height: clamp(11rem, 16vw, 16rem);
  object-fit: cover;
  object-position: 0% 50%;
  animation: panorama-pan 38s ease-in-out infinite alternate;
}

/* Wide screens see the whole strip, so there is nothing left to pan */
@media (min-width: 1280px) {
  .panorama__image {
    height: auto;
    animation: none;
  }
}

@keyframes panorama-pan {
  to {
    object-position: 100% 50%;
  }
}