Столбцы

Выводит информацию в ряд, при переходе через брейкпоинт переходит в заданное количество столбцов.

--column-gap - расстояние между столбцами после переходя через брейкпоинт. default: 5%

--row-gap - расстояние между столбцами до переходя через брейкпоинт. default: 10%

--columns - определения столбцов. default: 1fr 1fr

--align-items - вертикальное выравнивание содержимого в столбцах между собой. default: center

.columns {
   --column-gap: 5%;
   --row-gap: 10%;
   --columns: 1fr 1fr;
   --align-items: center;

   @media (width >= ($md2+px)) {
      --row-gap: 0!important; 
      display: grid;
      grid-template-columns: var(--columns);
		align-items: var(--align-items);
		column-gap: var(--column-gap);
	}

   & > *:not(:last-child) {
      margin-bottom: var(--row-gap);
   }
}