.gallery-list-wrapper {
	--gallery-width:100%;
	width:var(--gallery-width);
	margin:2em auto 2em auto;
	padding:0;
}
.grid{
	display:block;
}
.grid:after{
	content:'';
	display:block;
	clear:both;
}


article.grid-item{
	position:relative;
	
	/* 3 columns for full width - 3 cols, 2 gutters */
	/*width:calc((var(--gallery-width) - (2 * var(--gallery-gap))) * 0.3333);*/
	
	/* 2 columns for full width - 2 columns, 1 gutter */
	width:calc((var(--gallery-width) - var(--gallery-gap)) * 0.5);
	
	margin-bottom:var(--gallery-gap);
	box-sizing:border-box;
	float:left;
    /* Previously this enabled a slight hover-zoom on the whole item.
       Commented out to disable zoom while keeping the original for future use.
    transition:transform 350ms ease, box-shadow 350ms ease; */
    /* will-change:transform; */
	overflow:hidden;
	background:var(--color-img-placeholder);
}
article.grid-item > i.icon-loading{
	position:absolute;
	top:calc(((100% - 60px) * 0.5) - 15px);
    left:calc(50% - 15px);
}
article.grid-item > i.icon-loading:before{
	font-size:30px;
}
article.grid-item.loaded{
	background:#000;
}
article.grid-item.loaded i.icon-loading{
	display:none;
}
article.grid-item a.post-link,
article.grid-item a.post-link *{
	text-decoration: none;
}
article.grid-item .post-images{
	/*position:relative;*/
	width:100%;
	overflow:hidden; 
	display:block;
}
.post-images i{
	position:absolute;
}
.post-images img.post-image{
	display:block;
	width:100%;
	height:auto;
	transform-origin:bottom center;
}
.post-images img.post-image.blured{
    position:absolute;
    filter:blur(2px) saturate(2.5) brightness(2.5) contrast(0.6);
    /* The image is intentionally flipped/flattened vertically to create the
       decorative effect. Keep the vertical flip but avoid any horizontal
       zooming on hover. */
    transform:scaleY(-0.5);
    opacity:1;
}
.post-images img.post-image.post-image-first:not(.blured){
	position:relative;
}

.post-images img.post-image.post-image-second{
	position:absolute;
	opacity:0;
}

.post-images img.post-image.post-image-first:not(.blured){
	z-index:10;
}
.post-images img.post-image.post-image-first.blured{
	z-index:11;
}
.post-images img.post-image.post-image-second:not(.blured){
	position:absolute;
	top:0;
	z-index:12;
}
.post-images img.post-image.post-image-second.blured{
	position:absolute;
	top:0;
	z-index:13;
}



article.grid-item:hover .post-images,
article.grid-item:focus .post-images,
article.grid-item:active .post-images,
.post-images img.post-image{
    /* Restrict transitions to properties we actually animate (opacity)
       and leave transform animations out so there is no hover zoom. */
    transition:opacity 400ms ease;
    /* If you want to re-enable transform animations later, uncomment:
       transition:all 400ms ease; */
}

/* hover */
article.grid-item:hover img.post-image.post-image-second,
article.grid-item:focus img.post-image.post-image-second,
article.grid-item:active img.post-image.post-image-second{
    /* second image fades in on hover (image swap) - keep this behaviour */
    opacity:1;
}
article.grid-item:hover img.post-image:not(.blured),
article.grid-item:focus img.post-image:not(.blured),
article.grid-item:active img.post-image:not(.blured){
    /* Hover zoom removed. If you need the tiny zoom back, uncomment:
       transform:scale(1.01);
    */
    transform:none;
}
article.grid-item:hover img.post-image.blured,
article.grid-item:focus img.post-image.blured,
article.grid-item:active img.post-image.blured{
    /* Keep the vertical flip/flattening but do not apply any additional
       horizontal scaling on hover. Original horizontal zoom is preserved
       here as a commented line for later re-use. */
    transform:scaleY(-0.5);
    /* transform:scaleY(-0.5) scaleX(1.01); */
}

article.grid-item .post-meta{
	padding:15px 20px 15px 20px;
	background:rgba(255,255,255,0.9);
	transition:all 400ms ease;
	position:relative;
	z-index:20;
}
:root[data-theme="dark"] article.grid-item .post-meta{
	background:rgba(0,0,0,0.9);
}
article.grid-item:hover .post-meta,
article.grid-item:focus .post-meta,
article.grid-item:active .post-meta{
	background:rgba(255,255,255,0.8);
}
article.grid-item:hover .post-meta h3,
article.grid-item:focus .post-meta h3,
article.grid-item:active .post-meta h3{
	color:var(--color-link-hover);
}


.post-meta .post-title {
	margin:0 0 6px;
	font-size:1.05rem;
	line-height:1.2;
	text-decoration:none;
	color:var(--color-link);
}
.post-meta .post-excerpt{
	margin:0;
	color:var(--color-perex);
	font-size:0.9rem;
}


/* responsive */

/* 2 columns, 1 gutter */
/*@media (max-width: 1200px) {
	article.grid-item {
		width:calc((var(--gallery-width) - var(--gallery-gap)) * 0.5);
	}
}*/
/* 1 column */
/*@media (max-width: 720px) {
	article.grid-item {
		width:var(--gallery-width);
	}
}*/
@media (max-width: 890px) {
	article.grid-item {
		width:var(--gallery-width);
	}
}


/* loader */
.gallery-loading{
	text-align:center;
	margin:2em auto 2em auto;
	color:#444;
}
.gallery-loading i:before{
	width:20px;
	height:20px;
	font-size:20px;
	display:inline-block;
}
.gallery-next{
	display:flex;
	justify-content:center;
}
.gallery-next a{
	display:inline-block;
}