/*
 * The footer has a fixed height in styles.min.css, but its content can be
 * taller than that. Because .app uses `overflow-x: hidden` (which makes
 * `overflow-y` compute to `auto`), that overflow creates a second scrollbar.
 * Let the footer grow with its content while keeping the same minimum height.
 */
footer {
  height: auto;
  min-height: 516px;
}

@media (min-width: 768px) {
  footer {
    min-height: 628px;
  }
}

@media (min-width: 1200px) {
  footer {
    min-height: 900px;
  }
}

.projects-header {
  /* display: none; */
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transition: all ease 1s;
}

.projects-header.active {
  /* display: block; */
  position: relative;
  visibility: visible;
  opacity: 1;
}

@media (min-width: 768px) {
  .projects-item.livintech {
    margin: 0 10px 20px 20px;
  }
  .projects-item.rialto {
    margin: 0 10px 20px 20px;
  }
  .projects-item.hoopsai {
    margin: 0 20px 20px 10px;
  }
}

@media (min-width: 992px) {
  .projects-item.livintech {
    margin: 0 10px 20px 20px;
  }
  .projects-item.rialto {
    margin: 0 10px 20px 20px;
  }
  .projects-item.hoopsai {
    margin: 0 20px 20px 10px;
  }
}

@media (min-width: 1200px) {
  .projects-item.livintech {
    margin: 0 20px 40px;
  }
  .projects-item.rialto {
    margin: 0 20px 40px;
  }
  .projects-item.hoopsai {
    margin: 0 20px 40px;
  }
}