.liquid-ig-feed {
	margin-bottom: 2em;
}
.liquid-ig-feed-list {
	display: flex;
	padding: 0;
	margin: 0;
	flex-flow: row wrap;
	list-style: none;

	> li {
		flex: 0 0 20%;
		position: relative;

		img {
			width: 100%;
			height: auto;
		}
		&:hover {

			.liquid-ig-feed-overlay {
				opacity: 1;
				visibility: visible;

				i,
				span {
					opacity: 1;
					transform: translateY(0);
				}
				span {
					transition-delay: 0.1s;
				}
			}
		}
	}
	.liquid-stretch-images & {

		img {
			height: 100%;
			object-fit: cover;
		}
	}
	[data-list-columns="1"] & {

		> li {
			flex-basis: 100%;
		}
	}
	[data-list-columns="2"] & {

		> li {
			flex-basis: 50%;
		}
	}
	[data-list-columns="3"] & {

		> li {
			flex-basis: 33.333333333333333%;
		}
	}
	[data-list-columns="4"] & {

		> li {
			flex-basis: 25%;
		}
	}
	[data-list-columns="6"] & {

		> li {
			flex-basis: 16.666666666666667%;
		}
	}
	[data-list-gap="2"] & {
		margin-left: -1px;
		margin-right: -1px;

		> li {
			padding: 1px;
		}
	}
	[data-list-gap="4"] & {
		margin-left: -2px;
		margin-right: -2px;

		> li {
			padding: 2px;
		}
	}
	[data-list-gap="6"] & {
		margin-left: -3px;
		margin-right: -3px;

		> li {
			padding: 3px;
		}
	}
	[data-list-gap="8"] & {
		margin-left: -4px;
		margin-right: -4px;

		> li {
			padding: 4px;
		}
	}
}
.liquid-ig-feed-overlay {
	display: flex;
	width: 100%;
	height: 100%;
	padding: 1em;
	flex-flow: column wrap;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	visibility: hidden;
	background-color: var(--color-primary);
	color: #fff;
	transition: opacity 0.3s, visibility 0,3s;

	i,
	span {
		display: block;
		opacity: 0;
		transform: translateY(15px);
		transition: opacity 0.3s, transform 0.3s;

		&:only-child {
			margin-bottom: 0;
		}
	}
	i {
		margin-bottom: em(17, 50);
		font-size: 50px;
	}
	span {
		text-transform: uppercase;
		letter-spacing: 0.01em;
		font-weight: 700;
	}
	&:hover {
		color: #fff;
	}
}