/* JTL Defaults */
.slick-slide {
	.square {
		display: flex !important;
	}
}

.square-image {
	position: relative;
	display: flex;
	.inner {
		position: absolute;
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: flex-start; // Changing this to center *will* break detail page modals as the square there is really big

		img {
			height: auto;
			width: auto;
			max-width: 100%;
			max-height: 100%;
			object-fit: contain;

			&.lazyloading {
				color: transparent;
				opacity: 1;
				transition: opacity 300ms;
				width: auto;
				height: auto;
				max-width: 40px;
				max-height: 40px;
			}
		}
	}
}

.square-inner { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
/* END JTL Defaults */
