.home-observations-grid.home-observations-carousel {
  position: relative;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 36px) / 2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 4px 4px 12px;
  margin: -4px;
}
.home-observations-carousel::-webkit-scrollbar { display: none; }
.home-observations-carousel .home-observation { min-width: 0; scroll-snap-align: start; }
.home-observations-carousel:focus-visible { outline: 2px solid var(--grape); outline-offset: 4px; }
.home-observations-controls { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 18px; }
.home-observations-controls[hidden] { display: none; }
.home-observations-position { font-size: .9rem; color: var(--grape-deep); margin-right: 4px; }
.home-observations-arrow { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--grape); border-radius: 50%; background: transparent; color: var(--grape-deep); font: inherit; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.home-observations-arrow:hover:not(:disabled) { background: var(--grape); color: white; }
.home-observations-arrow:disabled { opacity: .35; cursor: default; }
.home-observations-arrow:focus-visible { outline: 2px solid var(--grape-deep); outline-offset: 3px; }
@media (max-width: 920px) {
  .home-observations-grid.home-observations-carousel { grid-auto-columns: calc(100% - 22px); gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-observations-carousel { scroll-behavior: auto; }
}