$sm: 480px;
$md: 768px;
$lg: 1024px;

/**
 *  Generic alm-listing Styles
 *  @since 1.0.0
 */
.alm-listing {
	.alm-reveal {
		outline: none;
		&:after {
			display: table;
			clear: both;
			height: 0;
			width: 100%;
			content: '';
		}
	}
}

.alm-listing {
	margin: 0;
	padding: 0;
	.alm-reveal > li,
	.alm-paging-content > li,
	> li {
		position: relative;
		&.alm-item {
			background: none;
			margin: 0 0 30px;
			padding: 0 0 0 80px;
			position: relative;
			list-style: none;
			@media screen and (min-width: $sm) {
				padding: 0 0 0 100px;
			}
			@media screen and (min-width: $md) {
				padding: 0 0 0 135px;
			}
			@media screen and (min-width: $lg) {
				padding: 0 0 0 160px;
			}
			h3 {
				margin: 0;
			}
			p {
				margin: 10px 0 0;
				&.entry-meta {
					opacity: 0.75;
				}
			}
			img {
				position: absolute;
				left: 0;
				top: 0;
				border-radius: 2px;
				max-width: 65px;
				@media screen and (min-width: $sm) {
					max-width: 85px;
				}
				@media screen and (min-width: $md) {
					max-width: 115px;
				}
				@media screen and (min-width: $lg) {
					max-width: 140px;
				}
			}
		}
		&.no-img {
			padding: 0;
		}
	}
	&.products {
		li.product {
			padding-left: inherit;
			img {
				position: static;
				border-radius: inherit;
			}
		}
	}
	&.stylefree {
		.alm-reveal > li,
		.alm-paging-content > li,
		> li {
			padding: inherit;
			margin: inherit;
			img {
				padding: inherit;
				margin: inherit;
				position: static;
				border-radius: inherit;
			}
		}
	}
}

// Right to left (rtl)
.alm-listing.rtl {
	.alm-reveal > li,
	.alm-paging-content > li {
		padding: 0 170px 0 0;
		text-align: right;
		img {
			left: auto;
			right: 0;
		}
	}
	&.products {
		li.product {
			padding-right: inherit;
		}
	}
}

// Masonry default styles
.alm-masonry {
	display: block;
	overflow: hidden;
	clear: both;
}

// Placeholder default styles
.alm-placeholder {
	opacity: 0;
	transition: opacity 0.2s ease;
	display: none;
}

// Horizontal Layout
.ajax-load-more-wrap {
	&.alm-horizontal {
		display: flex;
		flex-wrap: nowrap;
		width: 100%;
		.alm-listing,
		.alm-listing .alm-reveal {
			display: flex;
			flex-wrap: nowrap;
			flex-direction: row;
			> li.alm-item {
				padding: 0;
				text-align: center;
				margin: 0 2px;
				padding: 15px;
				height: auto;
				background-color: #fff;
				border-radius: 3px;
				img {
					position: static;
					border-radius: 100%;
					max-width: none;
				}
			}
		}
		.alm-listing .alm-reveal:after {
			display: none;
		}
	}
}