.section{
padding:80px 0;
}

.section-light{
background:#fff;
}

.section-gray{
background:var(--neutral-100);
}

.section-dark{
background:var(--primary-900);
color:#fff;
}

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

.grid-4{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
}

.center{
text-align:center;
}

/* ====================================================== */
/* RESPONSIVE GRIDS */
/* ====================================================== */

@media (max-width: 992px) {

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

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

}

@media (max-width: 576px) {

  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

}