:root{
  --wrap-max: 1200px;
  --gutter: 16px;
  --gap: 24px;
  --cols: 12;
}

.container{ width: 100%; }

.wrap{
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--gutter);

  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--gap);
}

.col{
  grid-column: span 12;
  min-width: 0;
}

/* desktop spans */
.s-1{grid-column:span 1}
.s-2{grid-column:span 2}
.s-3{grid-column:span 3}
.s-4{grid-column:span 4}
.s-5{grid-column:span 5}
.s-6{grid-column:span 6}
.s-7{grid-column:span 7}
.s-8{grid-column:span 8}
.s-9{grid-column:span 9}
.s-10{grid-column:span 10}
.s-11{grid-column:span 11}
.s-12{grid-column:span 12}

/* mobile spans (si quieres control) */
@media (max-width: 768px){
  .m-1{grid-column:span 1}
  .m-2{grid-column:span 2}
  .m-3{grid-column:span 3}
  .m-4{grid-column:span 4}
  .m-5{grid-column:span 5}
  .m-6{grid-column:span 6}
  .m-7{grid-column:span 7}
  .m-8{grid-column:span 8}
  .m-9{grid-column:span 9}
  .m-10{grid-column:span 10}
  .m-11{grid-column:span 11}
  .m-12{grid-column:span 12}
}