/* ===== FLEX BASIS ===== */

.flex{
  display:flex;
}

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

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

/* ===== GRID BASIS ===== */

.grid{
  display:grid;
}

.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}

.grid-3{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:32px;
}

/* ===== RESPONSIVE GRID ===== */

@media (max-width:1100px){

  .grid-2{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:28px;
  }

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

}

@media (max-width:680px){

  .grid-2{
    grid-template-columns:1fr;
    gap:20px;
  }

  .grid-3{
    grid-template-columns:1fr;
    gap:20px;
  }

}