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

/* [ DESKTOP ] */
.grid-item[lg="1"] {
  grid-column-end: span 1;
}
.grid-item[lg="2"] {
  grid-column-end: span 2;
}
.grid-item[lg="3"] {
  grid-column-end: span 3;
}
.grid-item[lg="4"] {
  grid-column-end: span 4;
}
.grid-item[lg="5"] {
  grid-column-end: span 5;
}
.grid-item[lg="6"] {
  grid-column-end: span 6;
}
.grid-item[lg="7"] {
  grid-column-end: span 7;
}
.grid-item[lg="8"] {
  grid-column-end: span 8;
}
.grid-item[lg="9"] {
  grid-column-end: span 9;
}
.grid-item[lg="10"] {
  grid-column-end: span 10;
}
.grid-item[lg="11"] {
  grid-column-end: span 11;
}
.grid-item[lg="12"] {
  grid-column-end: span 12;
}

/* [ ALIGN CENTER ] */
.grid-item[lg="2"][align="center"] {
  grid-column-start: 6;
}
.grid-item[lg="4"][align="center"] {
  grid-column-start: 5;
}
.grid-item[lg="6"][align="center"] {
  grid-column-start: 4;
}
.grid-item[lg="8"][align="center"] {
  grid-column-start: 3;
}
.grid-item[lg="10"][align="center"] {
  grid-column-start: 2;
}
.grid-item[lg="12"][align="center"] {
  grid-column-start: 0;
}

/* [ TABLET ] */
@media screen and (max-width: 768px) {
  .grid-item[md="1"] {
    grid-column-end: span 1;
  }
  .grid-item[md="2"] {
    grid-column-end: span 2;
  }
  .grid-item[md="3"] {
    grid-column-end: span 3;
  }
  .grid-item[md="4"] {
    grid-column-end: span 4;
  }
  .grid-item[md="5"] {
    grid-column-end: span 5;
  }
  .grid-item[md="6"] {
    grid-column-end: span 6;
  }
  .grid-item[md="7"] {
    grid-column-end: span 7;
  }
  .grid-item[md="8"] {
    grid-column-end: span 8;
  }
  .grid-item[md="9"] {
    grid-column-end: span 9;
  }
  .grid-item[md="10"] {
    grid-column-end: span 10;
  }
  .grid-item[md="11"] {
    grid-column-end: span 11;
  }
  .grid-item[md="12"] {
    grid-column-end: span 12;
  }

  /* [ ALIGN CENTER ] */
  .grid-item[md="2"][align="center"] {
    grid-column-start: 6;
  }
  .grid-item[md="4"][align="center"] {
    grid-column-start: 5;
  }
  .grid-item[md="6"][align="center"] {
    grid-column-start: 4;
  }
  .grid-item[md="8"][align="center"] {
    grid-column-start: 3;
  }
  .grid-item[md="10"][align="center"] {
    grid-column-start: 2;
  }
  .grid-item[md="12"][align="center"] {
    grid-column-start: 0;
  }
}

/* [ MOBILE ] */
@media screen and (max-width: 576px) {
  .grid-item[sm="1"] {
    grid-column-end: span 1;
  }
  .grid-item[sm="2"] {
    grid-column-end: span 2;
  }
  .grid-item[sm="3"] {
    grid-column-end: span 3;
  }
  .grid-item[sm="4"] {
    grid-column-end: span 4;
  }
  .grid-item[sm="5"] {
    grid-column-end: span 5;
  }
  .grid-item[sm="6"] {
    grid-column-end: span 6;
  }
  .grid-item[sm="7"] {
    grid-column-end: span 7;
  }
  .grid-item[sm="8"] {
    grid-column-end: span 8;
  }
  .grid-item[sm="9"] {
    grid-column-end: span 9;
  }
  .grid-item[sm="10"] {
    grid-column-end: span 10;
  }
  .grid-item[sm="11"] {
    grid-column-end: span 11;
  }
  .grid-item[sm="12"] {
    grid-column-end: span 12;
  }

  /* [ ALIGN CENTER ] */
  .grid-item[sm="2"][align="center"] {
    grid-column-start: 6;
  }
  .grid-item[sm="4"][align="center"] {
    grid-column-start: 5;
  }
  .grid-item[sm="6"][align="center"] {
    grid-column-start: 4;
  }
  .grid-item[sm="8"][align="center"] {
    grid-column-start: 3;
  }
  .grid-item[sm="10"][align="center"] {
    grid-column-start: 2;
  }
  .grid-item[sm="12"][align="center"] {
    grid-column-start: 0;
  }
}