index.css

/* ========== variables start ========== */
:root {
  --grid-col-1: calc(100% / 12 * 1);
  --grid-col-2: calc(100% / 12 * 2);
  --grid-col-3: calc(100% / 12 * 3);
  --grid-col-4: calc(100% / 12 * 4);
  --grid-col-5: calc(100% / 12 * 5);
  --grid-col-6: calc(100% / 12 * 6);
  --grid-col-7: calc(100% / 12 * 7);
  --grid-col-8: calc(100% / 12 * 8);
  --grid-col-9: calc(100% / 12 * 9);
  --grid-col-10: calc(100% / 12 * 10);
  --grid-col-11: calc(100% / 12 * 11);
  --grid-col-12: calc(100% / 12 * 12);
  --grid-col-same-5: calc(100% / 5);
  --grid-col-same-7: calc(100% / 7);
  --grid-col-same-8: calc(100% / 8);
  --grid-col-same-9: calc(100% / 9);
  --grid-col-same-10: calc(100% / 10);
  --grid-col-same-11: calc(100% / 11);
  --grid-start: flex-start;
  --grid-center: center;
  --grid-end: flex-end;
  --grid-stretch: stretch;
  --grid-around: space-around;
  --grid-between: space-between;
}
/* ========== variables end ========== */
/* ========== reset start ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* ========== reset end ========== */
/* ========== row start ========== */
.row {
  display: flex;
  flex-wrap: wrap;
}
/* ========== row end ========== */
/* ========== wrapping start ========== */
.row.wrap-xl {
  flex-wrap: wrap;
}

.row.nowrap-xl {
  flex-wrap: nowrap;
}
/* ========== wrapping end ========== */
/* ========== grow & shrink start ========== */
.grow-1-xl {
  flex-grow: 1;
}

.shrink-0-xl {
  flex-shrink: 0;
}
/* ========== grow & shrink end ========== */
/* ========== align & justify start ========== */
.v-start-xl {
  align-items: var(--grid-start);
}

.v-center-xl {
  align-items: var(--grid-center);
}

.v-end-xl {
  align-items: var(--grid-end);
}

.v-stretch-xl {
  align-items: var(--grid-stretch);
}

.h-start-xl {
  justify-content: var(--grid-start);
}

.h-center-xl {
  justify-content: var(--grid-center);
}

.h-end-xl {
  justify-content: var(--grid-end);
}

.h-around-xl {
  justify-content: var(--grid-around);
}

.h-between-xl {
  justify-content: var(--grid-between);
}
/* ========== align & justify end ========== */
/* ========== widths start ========== */
.row > .col-xl {
  flex-grow: 1;
  max-width: 100%;
}

.row > .col-auto-xl {
  max-width: 100%;
}

.row > .col-same-5-xl {
  width: var(--grid-col-same-5);
}

.row > .col-same-7-xl {
  width: var(--grid-col-same-7);
}

.row > .col-same-8-xl {
  width: var(--grid-col-same-8);
}

.row > .col-same-9-xl {
  width: var(--grid-col-same-9);
}

.row > .col-same-10-xl {
  width: var(--grid-col-same-10);
}

.row > .col-same-11-xl {
  width: var(--grid-col-same-11);
}

.row > .col-1-xl {
  width: var(--grid-col-1);
}

.row > .col-2-xl {
  width: var(--grid-col-2);
}

.row > .col-3-xl {
  width: var(--grid-col-3);
}

.row > .col-4-xl {
  width: var(--grid-col-4);
}

.row > .col-5-xl {
  width: var(--grid-col-5);
}

.row > .col-6-xl {
  width: var(--grid-col-6);
}

.row > .col-7-xl {
  width: var(--grid-col-7);
}

.row > .col-8-xl {
  width: var(--grid-col-8);
}

.row > .col-9-xl {
  width: var(--grid-col-9);
}

.row > .col-10-xl {
  width: var(--grid-col-10);
}

.row > .col-11-xl {
  width: var(--grid-col-11);
}

.row > .col-12-xl {
  width: var(--grid-col-12);
}
/* ========== widths end ========== */

@media (max-width: 1550px) {
  /* ========== wrapping start ========== */
  .row.wrap-lg {
    flex-wrap: wrap;
  }

  .row.nowrap-lg {
    flex-wrap: nowrap;
  }
  /* ========== wrapping end ========== */
  /* ========== grow & shrink start ========== */
  .grow-1-lg {
    flex-grow: 1;
  }

  .shrink-0-lg {
    flex-shrink: 0;
  }
  /* ========== grow & shrink end ========== */
  /* ========== align & justify start ========== */
  .v-start-lg {
    align-items: var(--grid-start);
  }

  .v-center-lg {
    align-items: var(--grid-center);
  }

  .v-end-lg {
    align-items: var(--grid-end);
  }

  .v-stretch-lg {
    align-items: var(--grid-stretch);
  }

  .h-start-lg {
    justify-content: var(--grid-start);
  }

  .h-center-lg {
    justify-content: var(--grid-center);
  }

  .h-end-lg {
    justify-content: var(--grid-end);
  }

  .h-around-lg {
    justify-content: var(--grid-around);
  }

  .h-between-lg {
    justify-content: var(--grid-between);
  }
  /* ========== align & justify end ========== */
  /* ========== widths start ========== */
  .row > .col-lg {
    flex-grow: 1;
    max-width: 100%;
  }

  .row > .col-auto-lg {
    max-width: 100%;
  }

  .row > .col-same-5-lg {
    width: var(--grid-col-same-5);
  }

  .row > .col-same-7-lg {
    width: var(--grid-col-same-7);
  }
  
  .row > .col-same-8-lg {
    width: var(--grid-col-same-8);
  }
  
  .row > .col-same-9-lg {
    width: var(--grid-col-same-9);
  }
  
  .row > .col-same-10-lg {
    width: var(--grid-col-same-10);
  }
  
  .row > .col-same-11-lg {
    width: var(--grid-col-same-11);
  }

  .row > .col-1-lg {
    width: var(--grid-col-1);
  }

  .row > .col-2-lg {
    width: var(--grid-col-2);
  }

  .row > .col-3-lg {
    width: var(--grid-col-3);
  }

  .row > .col-4-lg {
    width: var(--grid-col-4);
  }

  .row > .col-5-lg {
    width: var(--grid-col-5);
  }

  .row > .col-6-lg {
    width: var(--grid-col-6);
  }

  .row > .col-7-lg {
    width: var(--grid-col-7);
  }

  .row > .col-8-lg {
    width: var(--grid-col-8);
  }

  .row > .col-9-lg {
    width: var(--grid-col-9);
  }

  .row > .col-10-lg {
    width: var(--grid-col-10);
  }

  .row > .col-11-lg {
    width: var(--grid-col-11);
  }

  .row > .col-12-lg {
    width: var(--grid-col-12);
  }
  /* ========== widths end ========== */
}

@media (max-width: 1250px) {
  /* ========== wrapping start ========== */
  .row.wrap-md {
    flex-wrap: wrap;
  }

  .row.nowrap-md {
    flex-wrap: nowrap;
  }
  /* ========== wrapping end ========== */
  /* ========== grow & shrink start ========== */
  .grow-1-md {
    flex-grow: 1;
  }

  .shrink-0-md {
    flex-shrink: 0;
  }
  /* ========== grow & shrink end ========== */
  /* ========== align & justify start ========== */
  .v-start-md {
    align-items: var(--grid-start);
  }

  .v-center-md {
    align-items: var(--grid-center);
  }

  .v-end-md {
    align-items: var(--grid-end);
  }

  .v-stretch-md {
    align-items: var(--grid-stretch);
  }

  .h-start-md {
    justify-content: var(--grid-start);
  }

  .h-center-md {
    justify-content: var(--grid-center);
  }

  .h-end-md {
    justify-content: var(--grid-end);
  }

  .h-around-md {
    justify-content: var(--grid-around);
  }

  .h-between-md {
    justify-content: var(--grid-between);
  }
  /* ========== align & justify end ========== */
  /* ========== widths start ========== */
  .row > .col-md {
    flex-grow: 1;
    max-width: 100%;
  }

  .row > .col-auto-md {
    max-width: 100%;
  }

  .row > .col-same-5-md {
    width: var(--grid-col-same-5);
  }

  .row > .col-same-7-md {
    width: var(--grid-col-same-7);
  }
  
  .row > .col-same-8-md {
    width: var(--grid-col-same-8);
  }
  
  .row > .col-same-9-md {
    width: var(--grid-col-same-9);
  }
  
  .row > .col-same-10-md {
    width: var(--grid-col-same-10);
  }
  
  .row > .col-same-11-md {
    width: var(--grid-col-same-11);
  }

  .row > .col-1-md {
    width: var(--grid-col-1);
  }

  .row > .col-2-md {
    width: var(--grid-col-2);
  }

  .row > .col-3-md {
    width: var(--grid-col-3);
  }

  .row > .col-4-md {
    width: var(--grid-col-4);
  }

  .row > .col-5-md {
    width: var(--grid-col-5);
  }

  .row > .col-6-md {
    width: var(--grid-col-6);
  }

  .row > .col-7-md {
    width: var(--grid-col-7);
  }

  .row > .col-8-md {
    width: var(--grid-col-8);
  }

  .row > .col-9-md {
    width: var(--grid-col-9);
  }

  .row > .col-10-md {
    width: var(--grid-col-10);
  }

  .row > .col-11-md {
    width: var(--grid-col-11);
  }

  .row > .col-12-md {
    width: var(--grid-col-12);
  }
  /* ========== widths end ========== */
}

@media (max-width: 950px) {
  /* ========== wrapping start ========== */
  .row.wrap-sm {
    flex-wrap: wrap;
  }

  .row.nowrap-sm {
    flex-wrap: nowrap;
  }
  /* ========== wrapping end ========== */
  /* ========== grow & shrink start ========== */
  .grow-1-sm {
    flex-grow: 1;
  }

  .shrink-0-sm {
    flex-shrink: 0;
  }
  /* ========== grow & shrink end ========== */
  /* ========== align & justify start ========== */
  .v-start-sm {
    align-items: var(--grid-start);
  }

  .v-center-sm {
    align-items: var(--grid-center);
  }

  .v-end-sm {
    align-items: var(--grid-end);
  }

  .v-stretch-sm {
    align-items: var(--grid-stretch);
  }

  .h-start-sm {
    justify-content: var(--grid-start);
  }

  .h-center-sm {
    justify-content: var(--grid-center);
  }

  .h-end-sm {
    justify-content: var(--grid-end);
  }

  .h-around-sm {
    justify-content: var(--grid-around);
  }

  .h-between-sm {
    justify-content: var(--grid-between);
  }
  /* ========== align & justify end ========== */
  /* ========== widths start ========== */
  .row > .col-sm {
    flex-grow: 1;
    max-width: 100%;
  }

  .row > .col-auto-sm {
    max-width: 100%;
  }

  .row > .col-same-5-sm {
    width: var(--grid-col-same-5);
  }

  .row > .col-same-7-sm {
    width: var(--grid-col-same-7);
  }
  
  .row > .col-same-8-sm {
    width: var(--grid-col-same-8);
  }
  
  .row > .col-same-9-sm {
    width: var(--grid-col-same-9);
  }
  
  .row > .col-same-10-sm {
    width: var(--grid-col-same-10);
  }
  
  .row > .col-same-11-sm {
    width: var(--grid-col-same-11);
  }

  .row > .col-1-sm {
    width: var(--grid-col-1);
  }

  .row > .col-2-sm {
    width: var(--grid-col-2);
  }

  .row > .col-3-sm {
    width: var(--grid-col-3);
  }

  .row > .col-4-sm {
    width: var(--grid-col-4);
  }

  .row > .col-5-sm {
    width: var(--grid-col-5);
  }

  .row > .col-6-sm {
    width: var(--grid-col-6);
  }

  .row > .col-7-sm {
    width: var(--grid-col-7);
  }

  .row > .col-8-sm {
    width: var(--grid-col-8);
  }

  .row > .col-9-sm {
    width: var(--grid-col-9);
  }

  .row > .col-10-sm {
    width: var(--grid-col-10);
  }

  .row > .col-11-sm {
    width: var(--grid-col-11);
  }

  .row > .col-12-sm {
    width: var(--grid-col-12);
  }
  /* ========== widths end ========== */
}

@media (max-width: 750px) {
  /* ========== wrapping start ========== */
  .row.wrap-xs {
    flex-wrap: wrap;
  }

  .row.nowrap-xs {
    flex-wrap: nowrap;
  }
  /* ========== wrapping end ========== */
  /* ========== grow & shrink start ========== */
  .grow-1-xs {
    flex-grow: 1;
  }

  .shrink-0-xs {
    flex-shrink: 0;
  }
  /* ========== grow & shrink end ========== */
  /* ========== align & justify start ========== */
  .v-start-xs {
    align-items: var(--grid-start);
  }

  .v-center-xs {
    align-items: var(--grid-center);
  }

  .v-end-xs {
    align-items: var(--grid-end);
  }

  .v-stretch-xs {
    align-items: var(--grid-stretch);
  }

  .h-start-xs {
    justify-content: var(--grid-start);
  }

  .h-center-xs {
    justify-content: var(--grid-center);
  }

  .h-end-xs {
    justify-content: var(--grid-end);
  }

  .h-around-xs {
    justify-content: var(--grid-around);
  }

  .h-between-xs {
    justify-content: var(--grid-between);
  }
  /* ========== align & justify end ========== */
  /* ========== widths start ========== */
  .row > .col-xs {
    flex-grow: 1;
    max-width: 100%;
  }

  .row > .col-auto-xs {
    max-width: 100%;
  }

  .row > .col-same-5-xs {
    width: var(--grid-col-same-5);
  }

  .row > .col-same-7-xs {
    width: var(--grid-col-same-7);
  }
  
  .row > .col-same-8-xs {
    width: var(--grid-col-same-8);
  }
  
  .row > .col-same-9-xs {
    width: var(--grid-col-same-9);
  }
  
  .row > .col-same-10-xs {
    width: var(--grid-col-same-10);
  }
  
  .row > .col-same-11-xs {
    width: var(--grid-col-same-11);
  }

  .row > .col-1-xs {
    width: var(--grid-col-1);
  }

  .row > .col-2-xs {
    width: var(--grid-col-2);
  }

  .row > .col-3-xs {
    width: var(--grid-col-3);
  }

  .row > .col-4-xs {
    width: var(--grid-col-4);
  }

  .row > .col-5-xs {
    width: var(--grid-col-5);
  }

  .row > .col-6-xs {
    width: var(--grid-col-6);
  }

  .row > .col-7-xs {
    width: var(--grid-col-7);
  }

  .row > .col-8-xs {
    width: var(--grid-col-8);
  }

  .row > .col-9-xs {
    width: var(--grid-col-9);
  }

  .row > .col-10-xs {
    width: var(--grid-col-10);
  }

  .row > .col-11-xs {
    width: var(--grid-col-11);
  }

  .row > .col-12-xs {
    width: var(--grid-col-12);
  }
  /* ========== widths end ========== */
}