transform-origin: bottom left;
}
+div.portrait div.gallery div.first img {
+ margin-top: -320px;
+ margin-left: -240px;
+}
+
div.gallery {
border-bottom: 1px solid #ccc;
}
@media screen and (max-width: 640px) {
- div.gallery div.first {
- }
+ div.portrait div.gallery div.first img,
div.gallery div.first img {
max-width: 80vw;
margin: 0;
<div>
{% endif %}
{% thumbnail image.image "200x100" crop="50% 25%" as im %}
+{% if cell.slug == 'portrait' %}
+{% thumbnail image.image "480x640" crop="50% 25%" as im_large %}
+<span data-image-large="{{ im_large.url }}"><img src="{{ im.url }}"
+ {% if image.title %} title="{{image.title}}" {% endif %}/></span>
+{% endthumbnail %}
+{% else %}
{% thumbnail image.image "640x480" crop="50% 25%" as im_large %}
<span data-image-large="{{ im_large.url }}"><img src="{{ im.url }}"
{% if image.title %} title="{{image.title}}" {% endif %}/></span>
{% endthumbnail %}
+
+{% endif %}
{% endthumbnail %}
{% endfor %}
</div>