/* Work examples grid: same thumbnail frame for every tile (screenshots vs device mockups) */

#projects-container .project-item {
  position: relative;
}

#projects-container .project-item .project-image.img-responsive {
  display: block;
  width: 100%;
  max-width: none;
  vertical-align: top;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  object-position: top center;
}

/* Old browsers without aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
  #projects-container .project-item .project-image.img-responsive {
    height: 277px;
    object-fit: cover;
  }
}