photo_template.html

<img srcset="{{ site.image_path }}{{page.bucket}}/{{img.sizes[0]}}.xs.{{img.sizes[1]}} 600w,
             {{ site.image_path }}{{page.bucket}}/{{img.sizes[0]}}.s.{{img.sizes[1]}} 800w,
             {{ site.image_path }}{{page.bucket}}/{{img.sizes[0]}}.{{img.sizes[1]}} 1280w,
             {{ site.image_path }}{{page.bucket}}/{{img.sizes[0]}}.m.{{img.sizes[1]}} 2000w,
             {{ site.image_path }}{{page.bucket}}/{{img.sizes[0]}}.l.{{img.sizes[1]}} 3000w"
     sizes="(max-width: 800px) 600px,
            (max-width: 1064px) 800px,
            (max-width: 1700px) 1280px,
            (max-width: 3000px) 2000px,
            3000px"
     src="{{ site.image_path }}{{page.bucket}}/{{img.sizes[0]}}.{{img.sizes[1]}} | default: img.url}}"
     alt="{{ img.title }}">

photos.css

.photo {
  max-width: 100%;
  max-height: 80vh;
  margin-bottom: 0%;
  margin-top: 1%;
}

.photo-half {
  max-width: 49.75%;
  max-height: 80vh;
  margin-right: .5%;
  display: inline-block;
  margin-top: 1%;
}

.photo-half.end {
  max-width: 49.75%;
  margin-right: 0%;
  max-height: 80vh;
  display: inline-block;
  margin-top: 1%;
}

.photo-half p {
  margin-bottom: 0px;
}

.photo-triplet {
  max-width: 33%;
  max-height: 80vh;
  margin-right: .33%;
  display: inline-block;
}

.photo-vertical {
  margin-top: 3%;
  max-width: 50%;
  max-height: 100vh;
  margin-left: auto ;
  margin-right: auto ;
}