.review {
	@include clearfix();
	
	& + .review {
		margin-top: rem(25px);
		padding-top: rem(25px);
		border-top: 1px solid $gray-300;
	}
	& .review-info {
		margin-bottom: rem(15px);
		
		@include clearfix();
		@include media-breakpoint-down(lg) {
			margin-bottom: rem(5px);
		}
		
		& .review-rate {
			float: right;
			text-align: center;
			font-weight: 600;
			font-size: rem(13px);
			
			& .review-star {
				list-style-type: none;
				margin: 0;
				padding: 0;
				font-size: rem(14px);
				
				@include media-breakpoint-down(lg) {
					font-size: rem(12px);
				}
				
				& > li {
					float: left;
					color: lighten($dark, 60%);
					
					& + li {
						margin-left: rem(2px);
					}
					&.active {
						color: $orange;
					}
				}
			}
		}
	}
	& .review-icon {
		height: rem(48px);
		width: rem(48px);
		background: $gray-200;
		color: $gray-600;
		text-align: center;
		overflow: hidden;
		float: left;
		margin-right: rem(15px);
		
		@include border-radius($border-radius-lg * 20);
		@include media-breakpoint-down(lg) {
			width: rem(36px);
			height: rem(36px);
			margin-right: rem(10px);
		}
		
		& img {
			max-width: 100%;
		}
		& i {
			line-height: rem(50px);
			font-size: rem(36px);
			
			@include media-breakpoint-down(lg) {
				font-size: rem(28px);
				line-height: rem(40px);
			}
		}
	}
	& .review-name {
		font-weight: 600;
		font-size: rem(16px);
		padding: 0;
		
		@include media-breakpoint-down(lg) {
			font-size: rem(14px);
		}
	}
	& .review-date {
		font-size: rem(12px);
		font-weight: 600;
		color: lighten($black, 60%);
	}
	& .review-title {
		margin: rem(10px) 0;
		font-weight: 600;
		font-size: rem(16px);
		
		@include media-breakpoint-down(lg) {
			font-size: rem(14px);
			margin: rem(5px) 0;
		}
	}
	& .review-message {
		color: lighten($black, 38.5%);
		
		@include media-breakpoint-down(lg) {
			font-size: rem(12px);
		}
	}
}