/* Shrink project-card thumbnails (cards are now single-column and wide),
   and place the image to the right of the text. */
.projects .card .row.no-gutters {
  flex-direction: row-reverse;
}
.projects .card .card-img {
  display: block;
  width: 40%;
  margin-left: auto;
}
/* Narrow the image column so the text column can fill the rest of the card.
   The image keeps its on-screen size: 80% of 25% == 40% of 50% of the card. */
@media (min-width: 768px) {
  .projects .card .row.no-gutters > .col-md-6:first-child {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .projects .card .row.no-gutters > .col-md-6:first-child .card-img {
    width: 80%;
  }
  .projects .card .row.no-gutters > .col-md-6:not(:first-child) {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
  }
}