.container {
  max-width: var(--container-width-35);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.grid {
  display: grid;
  gap: var(--space-md);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.grid-4 {
  display: grid;
  /*
	grid-template-columns: repeat(4, 1fr);
	*/

  gap: var(--space-lg);
}

.grid-5 {
  display: grid;
  /*
	grid-template-columns: repeat(5, 1fr);
	*/
  grid-template-columns: minmax(250px, 300px) 1fr;
  gap: var(--space-md);
  /*
	max-width: var(--container-width-30);
	*/
}

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-lg);
}

.gap-sm {
  gap: var(--space-sm);
}

.mt-md {
  margin-top: var(--space-md);
}
.mt-sm {
  margin-top: var(--space-sm);
}
.mt-lg {
  margin-top: var(--space-lg);
}

.text-center {
  text-align: center;
}

@media (max-width: 900px) {
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .container {
    padding: 0 var(--space-sm);
  }
}