.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 1rem;
  max-width: 1200px;
  margin: auto;
}

@media (min-width: 700px) {
  .features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

.features-card {
  padding: 1rem;
  /* Comment out opacity: 0 if you are removing the animations */
  opacity: 0;
  text-align: center;
}

@media (min-width: 900px) {
  .features-card {
    margin: 0;
  }
}

.features-icon {  
  margin-bottom: 2rem;
  text-align: center;
}

.features-icon i {
  font-size: 20px;
}

/* .features-icon.audio {
  color: #F50057;
}

.features-icon.badge {
  color: #6C63FF;
}

.features-icon.card {
  color: #00BFA6;
}

.features-icon.fire {
  color: #F9A826;
}
 */

.features-text h2 {
  font-size: 15px;
  margin-top: 0;
  line-height: 1.25;
}

.features-text p {
  font-size: 15px;
}

.button {
  text-decoration: none;
  color: #fff;
  background-color: #6C63FF;
  padding: 1rem 2rem;
  display: inline-block;
  margin-top: 1rem;
  border-radius: 10px;
   Soften the rollover transition 
  transition: background-color 200ms ease;
}

.button:hover {
  background-color: #6c63ffb3;
}


/* Animation */

/* Animate each .features-card adding +300ms delay to each successive card 
Playing with the delay or the animation speed will change the flow of the animation */

/* Remove animations by commenting out the code below and removing opacity: 0 from .features-card */

.features-card:nth-child(1) {
  animation: fadeInUp 600ms ease-in-out forwards;
}

.features-card:nth-child(2) {
  animation: fadeInUp 600ms 300ms ease-in-out forwards;
}

.features-card:nth-child(3) {
  animation: fadeInUp 600ms 600ms ease-in-out forwards;
}


@keyframes fadeInUp {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}