/*-- -------------------------- -->
<---        Testimonial         -->
<--- -------------------------- -*/

@media only screen and (min-width: 0px) {
	.testimonial {
		margin: 20px auto 10px;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

		grid-gap: 50px;
	}
	.testimonial .card {
		position: relative;
		margin: 0 auto;
		background-color: var(--primary-bg);
		border-radius: 4px;
		padding: 20px;
		box-sizing: border-box;
		text-align: center;
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
		border-top: 5px solid var(--primary);
		overflow: hidden;
	}

	.testimonial .card:hover {
		transform: scale(1.035, 1.035);
		/* transform: translateY(-10px); */
	}

	.testimonial .card h2 {
		color: var(--primary);
	}

	.testimonial .card p {
		font-weight: lighter;
	}

	.testimonial .card .layer {
		position: absolute;
		top: calc(100% - 2px);
		left: 0;
		height: 100%;
		width: 100%;
		background: var(--primary-ol);
		z-index: 1;
		transition: 0.5s;
	}

	.testimonial .card:hover .layer {
		top: 0;
	}
	.testimonial .card .content {
		position: relative;
		z-index: 2;
	}

	.testimonial .card .content .image {
		width: 127px;
		height: 98px;
		margin: 0 auto;

		overflow: hidden;
	}

	.testimonial .card .content .details span {
		color: #03a9f4;
		font-size: 14px;
		transition: 0.5s;
	}
}

/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/

@media only screen and (min-width: 0px) {
	.gallery-container {
		padding: 5px 0;
		margin: 0 auto;
		width: 90%;
	}

	.gallery-wrap {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 70vh;
	}

	.item {
		flex: 1;
		height: 100%;
		background-position: center;
		background-size: cover;
		background-repeat: none;
		transition: flex 0.8s ease-out;
	}
	.item:hover {
		flex: 10;
	}

	.item-1 {
		background-image: url("/images/image-1.jpeg");
	}

	.item-2 {
		background-image: url("/images/image-2.jpeg");
	}

	.item-3 {
		background-image: url("/images/image-3.jpeg");
	}

	.item-4 {
		background-image: url("/images/image-4.jpeg");
	}

	.item-5 {
		background-image: url("/images/image-5.jpeg");
	}
}