.grid-col-1 {
  grid-template-columns: repeat(1, 1fr);
}

.grid-col-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-col-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-col-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-col-5 {
  grid-template-columns: repeat(5, 1fr);
}

.grid-col-6 {
  grid-template-columns: repeat(6, 1fr);
}

.grid-col-7 {
  grid-template-columns: repeat(7, 1fr);
}

.grid-col-8 {
  grid-template-columns: repeat(8, 1fr);
}

.grid-col-9 {
  grid-template-columns: repeat(9, 1fr);
}

.grid-col-10 {
  grid-template-columns: repeat(10, 1fr);
}

.grid-col-11 {
  grid-template-columns: repeat(11, 1fr);
}

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

/* Mobile to Tablet  */
@media (min-width: 320px) and (max-width: 767px) {
}

@media only screen and (min-width: 320px) {
  .xxs-grid-col-1 {
    grid-template-columns: repeat(1, 1fr);
  }

  .xxs-grid-col-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .xxs-grid-col-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .xxs-grid-col-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .xxs-grid-col-5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .xxs-grid-col-6 {
    grid-template-columns: repeat(6, 1fr);
  }

  .xxs-grid-col-7 {
    grid-template-columns: repeat(7, 1fr);
  }

  .xxs-grid-col-8 {
    grid-template-columns: repeat(8, 1fr);
  }

  .xxs-grid-col-9 {
    grid-template-columns: repeat(9, 1fr);
  }

  .xxs-grid-col-10 {
    grid-template-columns: repeat(10, 1fr);
  }

  .xxs-grid-col-11 {
    grid-template-columns: repeat(11, 1fr);
  }

  .xxs-grid-col-12 {
    grid-template-columns: repeat(12, 1fr);
  }
}
@media only screen and (min-width: 600px) {
  /* For tablets: */
  .full {
    width: 100%;
  }
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .leftAlignOnTabs {
    text-align: left;
  }
  .xs-grid-col-1 {
    grid-template-columns: repeat(1, 1fr);
  }

  .xs-grid-col-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .xs-grid-col-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .xs-grid-col-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .xs-grid-col-5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .xs-grid-col-6 {
    grid-template-columns: repeat(6, 1fr);
  }

  .xs-grid-col-7 {
    grid-template-columns: repeat(7, 1fr);
  }

  .xs-grid-col-8 {
    grid-template-columns: repeat(8, 1fr);
  }

  .xs-grid-col-9 {
    grid-template-columns: repeat(9, 1fr);
  }

  .xs-grid-col-10 {
    grid-template-columns: repeat(10, 1fr);
  }

  .xs-grid-col-11 {
    grid-template-columns: repeat(11, 1fr);
  }

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

@media only screen and (min-width: 768px) {
  /* For desktop: */
  /* md- */
  nav {
    position: sticky;
    top: 0;
    z-index: 1;
  }
  #links {
    display: grid;
  }
  .mobile-btn {
    display: none;
  }
  .mobile-menu,
  .mobile-btn,
  .fa-bars {
    display: none;
    position: absolute;
  }
  #links {
    padding: 1em;
    font-size: 12px;
    grid-gap: 1em;
  }

  /* grid columns */
  .sm-grid-col-1 {
    grid-template-columns: repeat(1, 1fr);
  }

  .sm-grid-col-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .sm-grid-col-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .sm-grid-col-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .sm-grid-col-5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .sm-grid-col-6 {
    grid-template-columns: repeat(6, 1fr);
  }

  .sm-grid-col-7 {
    grid-template-columns: repeat(7, 1fr);
  }

  .sm-grid-col-8 {
    grid-template-columns: repeat(8, 1fr);
  }

  .sm-grid-col-9 {
    grid-template-columns: repeat(9, 1fr);
  }

  .sm-grid-col-10 {
    grid-template-columns: repeat(10, 1fr);
  }

  .sm-grid-col-11 {
    grid-template-columns: repeat(11, 1fr);
  }

  .sm-grid-col-12 {
    grid-template-columns: repeat(12, 1fr);
  }
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  /* lg- */
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
  nav a {
    padding: 1em 1em;
    font-size: 15px;
  }
  footer {
    grid-template-columns: repeat(4, 1fr);
  }
  .copyright {
    grid-column: 2/4;
    text-align: center;
  }
  #socials {
    grid-column: 4 / 5;
    text-align: end;
  }

  /* grid columns */
  .md-grid-col-1 {
    grid-template-columns: repeat(1, 1fr);
  }

  .md-grid-col-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .md-grid-col-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .md-grid-col-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .md-grid-col-5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .md-grid-col-6 {
    grid-template-columns: repeat(6, 1fr);
  }

  .md-grid-col-7 {
    grid-template-columns: repeat(7, 1fr);
  }

  .md-grid-col-8 {
    grid-template-columns: repeat(8, 1fr);
  }

  .md-grid-col-9 {
    grid-template-columns: repeat(9, 1fr);
  }

  .md-grid-col-10 {
    grid-template-columns: repeat(10, 1fr);
  }

  .md-grid-col-11 {
    grid-template-columns: repeat(11, 1fr);
  }

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

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .cards {
    grid-template-columns: repeat(4, 1fr);
  }

  /* grid columns */
  .lg-grid-col-1 {
    grid-template-columns: repeat(1, 1fr);
  }

  .lg-grid-col-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .lg-grid-col-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .lg-grid-col-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .lg-grid-col-5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .lg-grid-col-6 {
    grid-template-columns: repeat(6, 1fr);
  }

  .lg-grid-col-7 {
    grid-template-columns: repeat(7, 1fr);
  }

  .lg-grid-col-8 {
    grid-template-columns: repeat(8, 1fr);
  }

  .lg-grid-col-9 {
    grid-template-columns: repeat(9, 1fr);
  }

  .lg-grid-col-10 {
    grid-template-columns: repeat(10, 1fr);
  }

  .lg-grid-col-11 {
    grid-template-columns: repeat(11, 1fr);
  }

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