/* For desktop view */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; /* Adjust the gap as needed */
  justify-content: center;
  align-items: center;
  text-align: center; /* Optional: If you want to center the content within grid items */
  margin: 0 auto; /* Optional: Centers the container on the page */
}

/* For medium view */
@media screen and (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .the-button {
    color: #00000000 !important;
  }
  .the-button-icon {
    position: relative !important;
    left: 42px !important;
  }
}

/* For small view */
@media screen and (max-width: 480px) {
  .grid-container {
    grid-template-columns: 1fr;
  }

  .the-button {
    color: #00000000 !important;
  }

  .the-button-icon {
    position: relative !important;
    left: 42px !important;
  }
}

.the-button {
  color: #fff;
}