content, column {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1em;
  grid-auto-rows: max-content;
  grid-area: content;
  position: relative;
}

content > content,
content > column {
	grid-area: auto;
	grid-column: 1 / span 12;
}

content > *,
column > * {
  grid-column: 1 / span 12;
  margin: 0;
}

.gc12 {
grid-column: span 12;
}

.gc8 {
  grid-column: span 8;
}
.gc6 {
  grid-column: span 6;
}
.gc5 {
  grid-column: span 5;
}
.gc4 {
  grid-column: span 4;
}
.gc3 {
  grid-column: span 3;
}
.gc2 {
  grid-column: span 2;
}
.gc1 {
  grid-column: span 1;
}

@media (max-width: 960px) {
  /*content > * {
    grid-column: 1 / span 6;
  }*/
  .gc4 {
    grid-column: span 6;
  }
}

@media (max-width: 768px) {
.gc6 {
    grid-column: span 12;
}
.gc5 {
  grid-column: span 12;
}
.gc4 {
    grid-column: span 12;
  }
.gc3 {
    grid-column: span 6;
  }
.gc2 {
  grid-column: span 3;
}
}

@media (max-width: 480px) {
.gc3 {
    grid-column: span 12;
  }
.gc2 {
  grid-column: span 4;
}
.gc1 {
  grid-column: span 2;
}
}


/* Section styles */
@media (min-width: 660px) {
main.grid_main {
  max-width: calc(1200px + 1em);
  margin: 0 auto;
}
}

main.grid_main content {
  padding: 1em;
}

@media (min-width: 660px) and (max-width: 990px) {
main.grid_main content {
  padding: 1em 5em;
}
}


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