@media (min-width: 768px) {
  .project-photo {
    margin: 0 -8px;
    font-size: 0px;
    line-height: 0; } }

.project-photo .column {
  width: 100%; }
  @media (min-width: 768px) {
    .project-photo .column {
      display: inline-block;
      vertical-align: top; } }
  @media (min-width: 768px) {
    .project-photo .column.w-50 {
      width: 50%;
      padding: 0 8px; } }
  @media (min-width: 768px) {
    .project-photo .column.w-50 .photo-box {
      padding-top: 55%; } }
  @media (min-width: 768px) {
    .project-photo .column.w-100 {
      width: 100%;
      padding: 0 8px; } }
  @media (min-width: 768px) {
    .project-photo .column.w-100 .photo-box {
      padding-top: 55%; } }
  @media (min-width: 768px) {
    .project-photo .column.h-100 {
      float: right; }
      .project-photo .column.h-100.align-left {
        float: left; }
      .project-photo .column.h-100.align-right {
        float: right; } }
  @media (min-width: 768px) {
    .project-photo .column.h-100 .photo-box {
      padding-top: 114%; } }
  @media (min-width: 1024px) {
    .project-photo .column.h-100 .photo-box {
      padding-top: 113.2%; } }
  @media (min-width: 1200px) {
    .project-photo .column.h-100 .photo-box {
      padding-top: 112.9%; } }
  @media (min-width: 1400px) {
    .project-photo .column.h-100 .photo-box {
      padding-top: 112.4%; } }
  @media (min-width: 1600px) {
    .project-photo .column.h-100 .photo-box {
      padding-top: 111.8%; } }

.project-photo .photo-box {
  margin-bottom: 16px;
  position: relative;
  overflow: hidden; }
  @media (max-width: 767px) {
    .project-photo .photo-box {
      padding-top: 55%; } }

.project-photo picture {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ddd; }
  .project-photo picture img {
    object-fit: cover;
    height: 100%;
    width: 100%; }