.na-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
.na-grid-inline {
  display: inline-grid;
  grid-template-columns: repeat(12, 1fr);
}

.na-grid-match {
  grid-auto-rows: 1fr;
}
.na-grid-dense {
  grid-auto-flow: dense;
}

.na-grid-1 > * { grid-column: span 1; }
.na-grid-2 > * { grid-column: span 2; }
.na-grid-3 > * { grid-column: span 3; }
.na-grid-4 > * { grid-column: span 4; }
.na-grid-5 > * { grid-column: span 5; }
.na-grid-6 > * { grid-column: span 6; }
.na-grid-7 > * { grid-column: span 7; }
.na-grid-8 > * { grid-column: span 8; }
.na-grid-9 > * { grid-column: span 9; }
.na-grid-10 > * { grid-column: span 10; }
.na-grid-11 > * { grid-column: span 11; }
.na-grid-12 > * { grid-column: span 12; }

@media (min-width: 480px) {
  .na-grid-1\@xs > * { grid-column: span 1; }
  .na-grid-2\@xs > * { grid-column: span 2; }
  .na-grid-3\@xs > * { grid-column: span 3; }
  .na-grid-4\@xs > * { grid-column: span 4; }
  .na-grid-5\@xs > * { grid-column: span 5; }
  .na-grid-6\@xs > * { grid-column: span 6; }
  .na-grid-7\@xs > * { grid-column: span 7; }
  .na-grid-8\@xs > * { grid-column: span 8; }
  .na-grid-9\@xs > * { grid-column: span 9; }
  .na-grid-10\@xs > * { grid-column: span 10; }
  .na-grid-11\@xs > * { grid-column: span 11; }
  .na-grid-12\@xs > * { grid-column: span 12; }
}

@media (min-width: 640px) {
  .na-grid-1\@sm > * { grid-column: span 1; }
  .na-grid-2\@sm > * { grid-column: span 2; }
  .na-grid-3\@sm > * { grid-column: span 3; }
  .na-grid-4\@sm > * { grid-column: span 4; }
  .na-grid-5\@sm > * { grid-column: span 5; }
  .na-grid-6\@sm > * { grid-column: span 6; }
  .na-grid-7\@sm > * { grid-column: span 7; }
  .na-grid-8\@sm > * { grid-column: span 8; }
  .na-grid-9\@sm > * { grid-column: span 9; }
  .na-grid-10\@sm > * { grid-column: span 10; }
  .na-grid-11\@sm > * { grid-column: span 11; }
  .na-grid-12\@sm > * { grid-column: span 12; }
}

@media (min-width: 768px) {
  .na-grid-1\@md > * { grid-column: span 1; }
  .na-grid-2\@md > * { grid-column: span 2; }
  .na-grid-3\@md > * { grid-column: span 3; }
  .na-grid-4\@md > * { grid-column: span 4; }
  .na-grid-5\@md > * { grid-column: span 5; }
  .na-grid-6\@md > * { grid-column: span 6; }
  .na-grid-7\@md > * { grid-column: span 7; }
  .na-grid-8\@md > * { grid-column: span 8; }
  .na-grid-9\@md > * { grid-column: span 9; }
  .na-grid-10\@md > * { grid-column: span 10; }
  .na-grid-11\@md > * { grid-column: span 11; }
  .na-grid-12\@md > * { grid-column: span 12; }
}

@media (min-width: 1024px) {
  .na-grid-1\@lg > * { grid-column: span 1; }
  .na-grid-2\@lg > * { grid-column: span 2; }
  .na-grid-3\@lg > * { grid-column: span 3; }
  .na-grid-4\@lg > * { grid-column: span 4; }
  .na-grid-5\@lg > * { grid-column: span 5; }
  .na-grid-6\@lg > * { grid-column: span 6; }
  .na-grid-7\@lg > * { grid-column: span 7; }
  .na-grid-8\@lg > * { grid-column: span 8; }
  .na-grid-9\@lg > * { grid-column: span 9; }
  .na-grid-10\@lg > * { grid-column: span 10; }
  .na-grid-11\@lg > * { grid-column: span 11; }
  .na-grid-12\@lg > * { grid-column: span 12; }
}

@media (min-width: 1280px) {
  .na-grid-1\@xl > * { grid-column: span 1; }
  .na-grid-2\@xl > * { grid-column: span 2; }
  .na-grid-3\@xl > * { grid-column: span 3; }
  .na-grid-4\@xl > * { grid-column: span 4; }
  .na-grid-5\@xl > * { grid-column: span 5; }
  .na-grid-6\@xl > * { grid-column: span 6; }
  .na-grid-7\@xl > * { grid-column: span 7; }
  .na-grid-8\@xl > * { grid-column: span 8; }
  .na-grid-9\@xl > * { grid-column: span 9; }
  .na-grid-10\@xl > * { grid-column: span 10; }
  .na-grid-11\@xl > * { grid-column: span 11; }
  .na-grid-12\@xl > * { grid-column: span 12; }
}

@media (min-width: 1536px) {
  .na-grid-1\@2xl > * { grid-column: span 1; }
  .na-grid-2\@2xl > * { grid-column: span 2; }
  .na-grid-3\@2xl > * { grid-column: span 3; }
  .na-grid-4\@2xl > * { grid-column: span 4; }
  .na-grid-5\@2xl > * { grid-column: span 5; }
  .na-grid-6\@2xl > * { grid-column: span 6; }
  .na-grid-7\@2xl > * { grid-column: span 7; }
  .na-grid-8\@2xl > * { grid-column: span 8; }
  .na-grid-9\@2xl > * { grid-column: span 9; }
  .na-grid-10\@2xl > * { grid-column: span 10; }
  .na-grid-11\@2xl > * { grid-column: span 11; }
  .na-grid-12\@2xl > * { grid-column: span 12; }
}

@media (min-width: 1920px) {
  .na-grid-1\@3xl > * { grid-column: span 1; }
  .na-grid-2\@3xl > * { grid-column: span 2; }
  .na-grid-3\@3xl > * { grid-column: span 3; }
  .na-grid-4\@3xl > * { grid-column: span 4; }
  .na-grid-5\@3xl > * { grid-column: span 5; }
  .na-grid-6\@3xl > * { grid-column: span 6; }
  .na-grid-7\@3xl > * { grid-column: span 7; }
  .na-grid-8\@3xl > * { grid-column: span 8; }
  .na-grid-9\@3xl > * { grid-column: span 9; }
  .na-grid-10\@3xl > * { grid-column: span 10; }
  .na-grid-11\@3xl > * { grid-column: span 11; }
  .na-grid-12\@3xl > * { grid-column: span 12; }
}

.na-grid-item-1 { grid-column: span 1; }
.na-grid-item-2 { grid-column: span 2; }
.na-grid-item-3 { grid-column: span 3; }
.na-grid-item-4 { grid-column: span 4; }
.na-grid-item-5 { grid-column: span 5; }
.na-grid-item-6 { grid-column: span 6; }
.na-grid-item-7 { grid-column: span 7; }
.na-grid-item-8 { grid-column: span 8; }
.na-grid-item-9 { grid-column: span 9; }
.na-grid-item-10 { grid-column: span 10; }
.na-grid-item-11 { grid-column: span 11; }
.na-grid-item-12 { grid-column: span 12; }
.na-grid-item-full { grid-column: 1 / -1; }
.na-grid-item-auto { grid-column: auto; }

@media (min-width: 480px) {
  .na-grid-item-1\@xs { grid-column: span 1; }
  .na-grid-item-2\@xs { grid-column: span 2; }
  .na-grid-item-3\@xs { grid-column: span 3; }
  .na-grid-item-4\@xs { grid-column: span 4; }
  .na-grid-item-5\@xs { grid-column: span 5; }
  .na-grid-item-6\@xs { grid-column: span 6; }
  .na-grid-item-7\@xs { grid-column: span 7; }
  .na-grid-item-8\@xs { grid-column: span 8; }
  .na-grid-item-9\@xs { grid-column: span 9; }
  .na-grid-item-10\@xs { grid-column: span 10; }
  .na-grid-item-11\@xs { grid-column: span 11; }
  .na-grid-item-12\@xs { grid-column: span 12; }
  .na-grid-item-full\@xs { grid-column: 1 / -1; }
  .na-grid-item-auto\@xs { grid-column: auto; }
}

@media (min-width: 640px) {
  .na-grid-item-1\@sm { grid-column: span 1; }
  .na-grid-item-2\@sm { grid-column: span 2; }
  .na-grid-item-3\@sm { grid-column: span 3; }
  .na-grid-item-4\@sm { grid-column: span 4; }
  .na-grid-item-5\@sm { grid-column: span 5; }
  .na-grid-item-6\@sm { grid-column: span 6; }
  .na-grid-item-7\@sm { grid-column: span 7; }
  .na-grid-item-8\@sm { grid-column: span 8; }
  .na-grid-item-9\@sm { grid-column: span 9; }
  .na-grid-item-10\@sm { grid-column: span 10; }
  .na-grid-item-11\@sm { grid-column: span 11; }
  .na-grid-item-12\@sm { grid-column: span 12; }
  .na-grid-item-full\@sm { grid-column: 1 / -1; }
  .na-grid-item-auto\@sm { grid-column: auto; }
}

@media (min-width: 768px) {
  .na-grid-item-1\@md { grid-column: span 1; }
  .na-grid-item-2\@md { grid-column: span 2; }
  .na-grid-item-3\@md { grid-column: span 3; }
  .na-grid-item-4\@md { grid-column: span 4; }
  .na-grid-item-5\@md { grid-column: span 5; }
  .na-grid-item-6\@md { grid-column: span 6; }
  .na-grid-item-7\@md { grid-column: span 7; }
  .na-grid-item-8\@md { grid-column: span 8; }
  .na-grid-item-9\@md { grid-column: span 9; }
  .na-grid-item-10\@md { grid-column: span 10; }
  .na-grid-item-11\@md { grid-column: span 11; }
  .na-grid-item-12\@md { grid-column: span 12; }
  .na-grid-item-full\@md { grid-column: 1 / -1; }
  .na-grid-item-auto\@md { grid-column: auto; }
}

@media (min-width: 1024px) {
  .na-grid-item-1\@lg { grid-column: span 1; }
  .na-grid-item-2\@lg { grid-column: span 2; }
  .na-grid-item-3\@lg { grid-column: span 3; }
  .na-grid-item-4\@lg { grid-column: span 4; }
  .na-grid-item-5\@lg { grid-column: span 5; }
  .na-grid-item-6\@lg { grid-column: span 6; }
  .na-grid-item-7\@lg { grid-column: span 7; }
  .na-grid-item-8\@lg { grid-column: span 8; }
  .na-grid-item-9\@lg { grid-column: span 9; }
  .na-grid-item-10\@lg { grid-column: span 10; }
  .na-grid-item-11\@lg { grid-column: span 11; }
  .na-grid-item-12\@lg { grid-column: span 12; }
  .na-grid-item-full\@lg { grid-column: 1 / -1; }
  .na-grid-item-auto\@lg { grid-column: auto; }
}

@media (min-width: 1280px) {
  .na-grid-item-1\@xl { grid-column: span 1; }
  .na-grid-item-2\@xl { grid-column: span 2; }
  .na-grid-item-3\@xl { grid-column: span 3; }
  .na-grid-item-4\@xl { grid-column: span 4; }
  .na-grid-item-5\@xl { grid-column: span 5; }
  .na-grid-item-6\@xl { grid-column: span 6; }
  .na-grid-item-7\@xl { grid-column: span 7; }
  .na-grid-item-8\@xl { grid-column: span 8; }
  .na-grid-item-9\@xl { grid-column: span 9; }
  .na-grid-item-10\@xl { grid-column: span 10; }
  .na-grid-item-11\@xl { grid-column: span 11; }
  .na-grid-item-12\@xl { grid-column: span 12; }
  .na-grid-item-full\@xl { grid-column: 1 / -1; }
  .na-grid-item-auto\@xl { grid-column: auto; }
}

@media (min-width: 1536px) {
  .na-grid-item-1\@2xl { grid-column: span 1; }
  .na-grid-item-2\@2xl { grid-column: span 2; }
  .na-grid-item-3\@2xl { grid-column: span 3; }
  .na-grid-item-4\@2xl { grid-column: span 4; }
  .na-grid-item-5\@2xl { grid-column: span 5; }
  .na-grid-item-6\@2xl { grid-column: span 6; }
  .na-grid-item-7\@2xl { grid-column: span 7; }
  .na-grid-item-8\@2xl { grid-column: span 8; }
  .na-grid-item-9\@2xl { grid-column: span 9; }
  .na-grid-item-10\@2xl { grid-column: span 10; }
  .na-grid-item-11\@2xl { grid-column: span 11; }
  .na-grid-item-12\@2xl { grid-column: span 12; }
  .na-grid-item-full\@2xl { grid-column: 1 / -1; }
  .na-grid-item-auto\@2xl { grid-column: auto; }
}

@media (min-width: 1920px) {
  .na-grid-item-1\@3xl { grid-column: span 1; }
  .na-grid-item-2\@3xl { grid-column: span 2; }
  .na-grid-item-3\@3xl { grid-column: span 3; }
  .na-grid-item-4\@3xl { grid-column: span 4; }
  .na-grid-item-5\@3xl { grid-column: span 5; }
  .na-grid-item-6\@3xl { grid-column: span 6; }
  .na-grid-item-7\@3xl { grid-column: span 7; }
  .na-grid-item-8\@3xl { grid-column: span 8; }
  .na-grid-item-9\@3xl { grid-column: span 9; }
  .na-grid-item-10\@3xl { grid-column: span 10; }
  .na-grid-item-11\@3xl { grid-column: span 11; }
  .na-grid-item-12\@3xl { grid-column: span 12; }
  .na-grid-item-full\@3xl { grid-column: 1 / -1; }
  .na-grid-item-auto\@3xl { grid-column: auto; }
}