.flex{
  flex-wrap: wrap;
}

.flex .half, .flex .third{
  width: 100%;
  margin-right: 0;
}

.mg1{ display: grid; grid-template-columns: repeat(1, 1fr); gap: 20px; }
.mg2{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.mg3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mg4{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.mg5{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.mg6{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.mg7{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 20px; }
.mg8{ display: grid; grid-template-columns: repeat(8, 1fr); gap: 20px; }
.mg9{ display: grid; grid-template-columns: repeat(9, 1fr); gap: 20px; }
.mg11{ display: grid; grid-template-columns: repeat(10, 1fr); gap: 20px; }
.mg11{ display: grid; grid-template-columns: repeat(11, 1fr); gap: 20px; }
.mg12{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }

.ms1{ grid-column: span 1; }
.ms2{ grid-column: span 2; }
.ms3{ grid-column: span 3; }
.ms4{ grid-column: span 4; }
.ms5{ grid-column: span 5; }
.ms6{ grid-column: span 6; }
.ms7{ grid-column: span 7; }
.ms8{ grid-column: span 8; }
.ms9{ grid-column: span 9; }
.ms10{ grid-column: span 10; }
.ms11{ grid-column: span 11; }
.ms12{ grid-column: span 12; }