@import "../../css/boilerplate.css";
@import "../Card/card.css";
@import "../Utilities/utilities.css";

.grid {
  display: grid;
  width: 100%;
}

.grid-col-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-col-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-col-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-col-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}

.bg-gray-400 {
  background: var(--lynx-gray);
}