/* Screenshots row */
.screenshots-row {
  scrollbar-width: thin;
  scrollbar-color: #6650A4 #141414;
}
.screenshots-row::-webkit-scrollbar {
  height: 4px;
}
.screenshots-row::-webkit-scrollbar-track {
  background: #141414;
  border-radius: 2px;
}
.screenshots-row::-webkit-scrollbar-thumb {
  background: #6650A4;
  border-radius: 2px;
}

/* Center the row when it fits the viewport; auto margins collapse to 0 when
   the row overflows, unlike justify-content: center which would clip the
   left edge of a scrollable container. */
.screenshot:first-child {
  margin-left: auto;
}
.screenshot:last-child {
  margin-right: auto;
}

.screenshot {
  flex-shrink: 0;
  height: 520px;
  width: auto;
  border-radius: 20px;
  border: 1px solid #2A2A2A;
  box-shadow: 0 20px 60px rgba(102, 80, 164, 0.15);
  object-fit: contain;
}

@media (max-width: 640px) {
  .screenshot {
    height: 400px;
  }
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Prevent layout shift from fixed nav */
body {
  overflow-x: hidden;
}