/******************************/
/* BELOW 1293px (smaller desktop) */
/******************************/
@media (max-width: 81em) {
  .grid {
    column-gap: 4rem;
  }
  .card-container-tools {
    gap: 8rem;
  }
}

/******************************/
/* BELOW 946px (Tablets) */
/******************************/
@media (max-width: 59em) {
  .grid--2--cols {
    grid-template-columns: 1fr;
    row-gap: 4.6rem;
  }

  .card-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-self: center;
    gap: 2.4rem;
  }

  .html {
    grid-column: 1 / 3;
  }
  .css {
    grid-column: 3 / 5;
  }
  .js {
    grid-column: 2/4;
  }

  .card-container-tools {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem;
    justify-self: center;
  }
}

/******************************/
/* BELOW 721px (Smaller Tablets) */
/******************************/
@media (max-width: 46em) {
  .main-section {
    padding: 7.2rem 6rem;
  }

  .gallery-section {
    padding: 0 6rem;
  }
}

/******************************/
/* BELOW 560px (Phone) */
/******************************/
@media (max-width: 35em) {
  .main-section {
    padding: 4.8rem 4rem;
  }

  .tech-icon {
    height: 12.2rem;
    width: 12.2rem;
    margin: 2rem;
  }

  .gallery-section {
    padding: 0 4rem 4.8rem 4rem;
  }
}

/******************************/
/* BELOW 432px (Phone) */
/******************************/
@media (max-width: 27em) {
  .card-container {
    grid-template-columns: 1fr;
  }

  .html {
    grid-column: 1 / -1;
  }
  .css {
    grid-column: 1 / -1;
  }
  .js {
    grid-column: 1 / -1;
  }

  .card-container-tools {
    grid-template-columns: 1fr;
  }

  .tech-icon {
    height: 13.2rem;
    width: 13.2rem;
    margin: 4rem;
  }
}