/* ==========================================================================
   Project Page Overrides
   Loaded AFTER main.css on projects.html only.
   Contains layout and card styles unique to the projects page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   #wrapper overrides for project page
   -------------------------------------------------------------------------- */

#wrapper {
  max-height: none;
  overflow: hidden;
}

@media screen and (max-width: 480px) {
  #wrapper {
    max-height: none !important;
  }
}

/* --------------------------------------------------------------------------
   Section Wrappers (#featured-projects, #in-progress)
   -------------------------------------------------------------------------- */

#featured-projects,
#in-progress {
  padding: 5em 0;
  background: rgba(36, 41, 67, 0.05);
}

#featured-projects .inner,
#in-progress .inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Project Cards
   -------------------------------------------------------------------------- */

.project-card {
  display: flex;
  flex-direction: column;
}

.project-content {
  flex: 1 1 auto;
}

/* --------------------------------------------------------------------------
   Grid Responsive Tweaks
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }
  .progress-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1600px) {
  .projects-grid {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  }
  .progress-grid {
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  }
}