/* ======================================================
   <!-- Maintain Aspect Ratio List -->
/* ====================================================== */
@import '@uixkit/core/_global/scss/mixins';
@import '@uixkit/core/_global/scss/functions';
@import '@uixkit/core/_global/scss/variables';

.uix-list-aspect-ratio {


	.uix-list-aspect-ratio__content {
		padding: 0 3rem; /* You can change this value to change items size */
	}

	.uix-list-aspect-ratio__item {
		display: block;
		@include transition-default();
		background: #212121;


		/* Maintain Aspect Ratio 1:1*/
		width: 100%;
		padding-top: 100%; /* 1:1 Aspect Ratio */
		position: relative; /* If you want text inside of it */

		img,
		i {
			@include transition-default();
			position: absolute;
			top: 50%;
			left: 50%;
			z-index: 1;
			width: 5rem;
			height: auto;
			transform: translate(-50%,-50%);
			font-size: 5rem;
			color: rgba(255,255,255,1);
		}


		&:hover {
			background: var(--uix-highlight-color1);

		}
	}
}


@media all and (max-width: 768px) {
	.uix-list-aspect-ratio {

		padding: 0;
		padding-right: 15px;

		.uix-list-aspect-ratio__item {

			img,
			i {
				width: 2.5rem;
				font-size: 2.5rem;
			}
		}

		.uix-core-grid__col-4 {
			width: 33.333333333333%;
			float: left;
		}

		.uix-list-aspect-ratio__content {
			padding: .5rem;
		}

	}


}