:root {
  --main-color: #564583;
}

.grid {
display: grid!important;
grid-gap: 20px;
}

.items-center {
justify-items: center;
}

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

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

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

.flex {
  display: flex!important;
}

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

.flex-row {
  flex-direction: row;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

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

.bordered {
border: 1px solid var(--main-color);
border-radius: 8px;
}

.backgrounded {
background-color: var(--main-color);
border-radius: 8px;
}

.columns-span-2 {
grid-column: 1 / 3;
}

.p-20 {
padding: 20px;
}

.m-20 {
margin: 20px 0;
}

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

.white {
color: #ffffff!important;
}

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