#pangeia-cards {
  --cards-gap: 20px;
  position: relative;
  width: 100%;
}
#pangeia-cards .pangeia-cards-track {
  display: flex;
  gap: var(--cards-gap);
  overflow: hidden;
  width: 100%;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}
#pangeia-cards .pangeia-card {
  flex: 0 0 240px;
  min-width: 0;
  scroll-snap-align: start;
}
#pangeia-cards .pangeia-card > article { width: 100%; }
#pangeia-cards .pangeia-cards-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #0D80F0;
  border-radius: 50%;
  background: #fff;
  color: #063C70;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(6, 60, 112, .15);
  transform: translateY(-50%);
}
#pangeia-cards .pangeia-cards-arrow[data-direction="previous"] { left: -20px; }
#pangeia-cards .pangeia-cards-arrow[data-direction="next"] { right: -20px; }
#pangeia-cards .pangeia-cards-arrow:hover:not(:disabled) { background: #063C70; color: #fff; }
#pangeia-cards .pangeia-cards-arrow:disabled { opacity: .45; cursor: default; }
#pangeia-cards .pangeia-cards-arrow:focus-visible { outline: 3px solid #34BB6A; outline-offset: 3px; }
@media (min-width: 768px) {
  #pangeia-cards { --cards-gap: 32px; }
  #pangeia-cards .pangeia-card { flex-basis: calc((100% - 2 * var(--cards-gap)) / 3); }
}
@media (min-width: 1280px) { #pangeia-cards { --cards-gap: 48px; } }
@media (prefers-reduced-motion: reduce) {
  #pangeia-cards .pangeia-cards-track { scroll-behavior: auto; }
}