@media (min-width: 768px) {
  section {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }

  html {
    overflow: auto;
    scroll-snap-type: both mandatory;
    overscroll-behavior-x: contain;
  }
}

.star.filled {
  color: gold;
}

.star {
  display: inline-block;
  font-size: 2em;
  color: grey;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

.animated-1.visible {
    opacity: 1; /* Make visible when in viewport */
    animation: fadeIn 1s linear forwards;
}

.animated-2.visible {
    opacity: 1; /* Make visible when in viewport */
    animation: fadeIn 1.2s linear forwards;
}

.animated-3.visible {
    opacity: 1; /* Make visible when in viewport */
    animation: fadeIn 1.5s linear forwards;
}

.animated-4.visible {
    opacity: 1; /* Make visible when in viewport */
    animation: fadeIn 1.8s linear forwards;
}

.animated-5.visible {
  opacity: 1; /* Make visible when in viewport */
  animation: fadeIn 2s linear forwards;
}