.max-w-lg {
  max-width: 1024px;
}

/*
  This corresponds to the container div with class:
  "mt-16 grid grid-cols-2 gap-8 sm:grid-cols-3 lg:grid-cols-7"
*/
.custom-grid-container {
  margin-top: 4rem; /* mt-16 */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* grid-cols-2 */
  gap: 2rem; /* gap-8 */
}

/* Responsive styles for the grid container */
/* sm: breakpoint (min-width: 640px) */
@media (min-width: 640px) {
  .custom-grid-container {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* sm:grid-cols-3 */
  }
}

/* lg: breakpoint (min-width: 1024px) */
@media (min-width: 1024px) {
  .custom-grid-container {
    grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  }
}


/*
  This corresponds to the item div with class:
  "col-span-1 flex justify-center rounded-xl bg-gray-50 p-8 shadow-sm"
*/
.custom-grid-item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  height: 200px;
  background-color: #f9fafb;
  border: 1px solid #F0F0F4;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  grid-column: span 1 / span 1; 
}
}