.c-quote {
	$self: &;
	@include spacing-section;
	background: $color-purple url(../img/layout/bg-depoimentos.svg) no-repeat center;
	background-size: cover;

	&__wrap {
		max-width: 1030px;
	}

	&__header {
		border-bottom: solid 1px rgba(255, 255, 255, 0.2);
	}

	&__title {
		@include title;
		// max-width: 485px;
        font-size: 32px;
        font-weight: 500;
        line-height: 40px;
		text-align: center;
		padding-bottom: 45px;
		color: #fff;

        span {
            color: $color-black;
        }
	}

	&__body {
		display: grid;
		grid-template-columns: repeat(8, 1fr) 176px;
		column-gap: 30px;
		margin-top: 80px;
	}

	&__panel {
		display: flex;
		align-items: center;
		grid-column: 1/8;
	}

	&__card {
		display: none;

		&__header {
			display: grid;
			grid-template-columns: 64px 5fr;
			column-gap: 30px;
		}

		&__cover {
			width: 64px;
			height: 64px;
			border: 3px solid $color-brand-green;
			border-radius: 50%;
			overflow: hidden;
		}

		&__info {
			&:after {
				content: '';
				display: block;
				width: 18px;
				height: 1px;
				margin: 20px 0 15px;
				background-color: #fff;
			}
		}

		&__title {
			margin-bottom: 5px;
			font-size: 22px;
			font-weight: 500;
			line-height: 32px;
			color: #ffffff;
		}

		&__position {
			font-size: 14px;
			font-weight: 600;
            line-height: 21px;
			color: rgba(#ffffff, 0.4);
		}

		&__cite {
			display: grid;
			grid-template-columns: 64px 5fr;
			column-gap: 30px;
			font-size: 15px;
			font-weight: 300;
			line-height: 27px;
			color: rgba(#fff, 0.8);

			&:before {
				content: '';
				display: block;
				width: 50px;
				height: 34px;
				margin: 9px auto 0;
				background: url('../images/quote.svg') center no-repeat;
				background-size: cover;
			}
		}

		&.is-active {
			display: block;
		}
	}

	&__list {
		grid-column: 9;
	}

	&__thumb {
		display: grid;
		grid-template-columns: 40px 1fr;
		column-gap: 8px;
		align-items: center;
		cursor: pointer;

		& + & {
			margin-top: 16px;
		}

		&__cover {
			overflow: hidden;
			border-radius: 50%;
			border: solid 2px transparent;
			box-shadow: 0 12px 10px 0px transparent;
			transition: 0.3s box-shadow, 0.3s border-color;

			> img {
				width: 100%;
			}
		}

		&__title,
		&__position {
			@include text-overflow;
			width: 120px;
			color: rgba(#fff, 0.4);
			transition: 0.3s color;
		}

		&__title {
			margin-bottom: 4px;
			font-size: 14px;
            font-weight: 600;
            line-height: 21px;
			font-weight: normal;
		}

		&__position {
			font-size: 11px;
			font-weight: 500;
		}

		&.is-active {
			#{$self}__thumb__cover {
				border-color: #9D4EDD;
				box-shadow: 0 12px 10px 0px rgba(18, 30, 41, 0.45);
			}

			#{$self}__thumb__title {
                font-weight: 600;
				color: #fff;
			}

			#{$self}__thumb__position {
                font-weight: 600;
				color: #fff;
			}
		}
	}

	@include media-breakpoint-down(md) {
		// &__title {
		// 	max-width: 570px;
		// }

		&__body {
			grid-template-columns: 5fr 1fr;
			margin-top: 50px;
		}

		&__panel {
			grid-column: 1;
			align-items: flex-start;
		}

		&__list {
			grid-column: 2;
		}

		&__thumb {
			grid-template-columns: 1fr;

			& + & {
				margin-top: 25px;
			}

			&__cover {
				width: 48px;
				height: 48px;
				margin-left: auto;
			}

			&__info {
				display: none;
			}
		}
	}

	@include media-breakpoint-down(sm) {
		&__body {
			grid-template-columns: 1fr;
			grid-template-areas:
				'list list'
				'panel panel';
			column-gap: 0;
			margin-top: 25px;
		}

		&__panel,
		&__list {
			grid-column: 1;
		}

		&__panel {
			grid-area: panel;
		}

		&__list {
			display: grid;
			grid-template-columns: repeat(6, 48px);
			grid-area: list;
			column-gap: 10px;
			justify-content: space-between;
			margin-bottom: 25px;
			padding-bottom: 25px;
			border-bottom: solid 1px rgba(255, 255, 255, 0.2);
		}

		&__thumb {
			& + & {
				margin-top: 0;
			}

			&__cover {
				margin-left: 0;
			}
		}
	}
}
