.grid {
  display: grid;
  grid-auto-rows: min-content;}
  @media (min-width: 800px){
    .grid._left {
      grid-template-columns: 1fr max-content; }
    .grid._right {
      grid-template-columns: max-content 1fr; } }


:is(.flex, .grid)._center {
  align-content: center;
  align-items: center; }


.flex { display: flex;
  &._wrap { flex-wrap: wrap;}
  &._reverse {flex-direction: row-reverse;}
  &._end { justify-content: flex-end; }
  &._down { flex-direction: column; }
  &._space {justify-content: space-between;}
}

.gap {
  &:not(._2, ._3, ._5, ._10) {gap: 5px;}
  &._2 {gap: 10px;}
  &._3 {gap: 15px;}
  &._5 {gap: 25px;}
  &._10 {gap: 50px;}
}