:root {
	--starYellow: #e0af6e;
	--disclaimerMaxWidth: 412px;
	--disclaimerFontSize: 10px;
}

.google-reviews {
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 891px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;

	/* init nesting */
	.swiper {
		width: 100%;
	}

	.swiper-slide {
		display: flex;
		flex-direction: column;
	}

	.reviewsSwiper2 .swiper-slide {
		opacity: 0;
		margin-bottom: 0;
	}

	.reviewsSwiper2 .swiper-slide-active {
		opacity: 1;
	}

	.reviewsSwiper2 .review-disclaimer {
		display: block;
		margin-top: 30px;
	}

	.reviewsSwiper .review-disclaimer {
		display: none;
	}

	.pagination-spacer {
		display: none;
	}

	.reviewsSwiper {
		width: 100%;
		box-sizing: border-box;
		padding: 10px 0;
	}

	.reviewsSwiper .review-wrapper {
		box-sizing: border-box;
		display: flex;
		background: #fff;
		width: 100%;
		opacity: 0.33;
		flex-direction: column;
		padding: 60px 30px;
		border-radius: 25px;
	}

	.reviewsSwiper .swiper-slide-thumb-active .review-wrapper {
		opacity: 1;
	}

	.logo-google {
		margin: 0 0 20px 0;
	}

	.logo-google img {
		filter: grayscale();
	}

	.review_rating {
		color: var(--starYellow);
		margin-bottom: 20px;
	}

	.review-footer {
		display: flex;
		width: 100%;
		align-items: center;
		gap: 20px;
	}

	.review-photo {
		width: 75px;
	}

	.reviewsSwiper .review-name {
		margin-top: 0;
		margin-bottom: 0;
	}

	.swiper-pagination {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.swiper-pagination .toggle-button {
		background-color: rgba(255, 255, 255, 0);
		padding: 0;
		cursor: pointer;
		width: 24px;
		height: 24px;
		border: 2px solid #768591;
		border-radius: 24px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
	}

	.swiper-pagination-bullet {
		padding: 0;
		border-radius: 5px;
		border: 0;
		opacity: 0.1;
		transition: all ease-in-out 0.2s;
		margin: 0 !important;
		height: auto;
	}

	.swiper-pagination-bullet-active {
		opacity: 1;
	}

	.reviewsSwiper2 .swiper-slide {
		display: flex;
		flex-direction: column;
	}

	.reviewsSwiper2 .review-title {
		margin-bottom: 0;
	}

	.review-swipper2 .google-reviews__button-wrapper {
		margin-top: 30px;
	}

	.review-disclaimer {
		max-width: var(--disclaimerMaxWidth);
		font-size: var(--disclaimerFontSize);
		margin-top: auto;
		width: 90%;
	}
}

/* Desktop only */
@media only screen and (min-width: 768px) {
	.google-reviews {
		/* init nesting */
		.reviewsSwiper {
			position: static;
		}

		.reviewsSwiper2 {
			padding-left: 90px;
		}

		.swiper-pagination {
			padding-left: 8px;
			position: absolute;
			left: 0 !important;
			width: max-content;
			bottom: 0 !important;
		}

		.swiper-pagination-bullet {
			height: 100px;
			width: 8px;
		}

		.swiper-pagination .toggle-button {
			margin-left: -8px;
		}

		.review-title {
			width: 344px;
		}
	}
}

/* tablet only */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.google-reviews {
		/* init nesting */
		.review-title {
			width: 244px;
		}
	}
}

/* Mobile Only */
@media only screen and (max-width: 767px) {
	.google-reviews {
		grid-template-columns: 1fr;
		height: auto;
		padding-top: 70px;
		padding-bottom: 60px;

		/* init nesting */
		.reviewsSwiper .swiper-slide {
			flex-grow: 1;
			flex-shrink: 0;
		}

		.reviewsSwiper2 {
			margin-bottom: 16px;
		}

		.reviewsSwiper .swiper-slide {
			margin-bottom: 40px;
		}

		.reviewsSwiper2 .review-disclaimer {
			display: none;
		}

		.reviewsSwiper .review-disclaimer {
			display: block;
		}

		.pagination-spacer {
			display: block;
		}

		.review-comment {
			flex-grow: 1;
			flex-shrink: 0;
			line-height: 1.6em;
		}

		.swiper-pagination {
			position: absolute;
			/* bottom: 0 !important; */
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.swiper-pagination-bullet {
			height: 8px;
			width: 100%;
		}
	}
}
