/* =============================================================================
- Classic Grid Elements
============================================================================= */
.gwel-classic-grid {
	.gwel-grid-container {
		display: grid;
		grid-row-gap: var(--gwel-grid--row-gap, 30px);
		grid-column-gap: var(--gwel-grid--column-gap, 30px);
		grid-template-columns: repeat(var(--gwel-grid--columns, 3),1fr);
	}
	.gwel-grid-item {
		z-index: 1;
		&:hover {
			z-index: 3;
		}
	}
	.gwel-animation-item {
		transition: transform .4s ease, opacity .4s ease;
		&.gwel-fade-in {
			opacity: 0;
		}
		&.gwel-fade-in-up {
			opacity: 0;
			transform: translate(0px,-30px) scale(1);
		}
		&.gwel-fade-in-down {
			opacity: 0;
			transform: translate(0px,30px) scale(1);
		}
		&.gwel-fade-in-left {
			opacity: 0;
			transform: translate(-30px,0px) scale(1);
		}
		&.gwel-fade-in-right {
			opacity: 0;
			transform: translate(30px,0px) scale(1);
		}
		&.gwel-zoom-in {
			opacity: 0;
			transform: translate(30px,0px) scale(0.8);
		}
		&.gwel-animated {
			opacity: 1;
			transform: translate(0px,0px) scale(1);
		}
	}
}