.c-related-products {
	$self: &;
	@include spacing-section;
	background-color: #f9f9fa;

	&__header {
		&__wrap {
			display: grid;
			grid-template-columns: 1fr;
			border-bottom: solid 1px rgba(45, 79, 110, 0.1);
			row-gap: 30px;
			text-align: center;
			padding-bottom: 40px;
			margin-bottom: 55px;
		}
	}

	&__title {
		@include title;
		color: $color-brand-blue;
	}

	p {
		font-size: 18px;
		font-weight: 300;
		line-height: 1.89;
		color: $color-brand-blue;

		& + p {
			margin-top: 20px;
		}
	}

	// &__body {
	// 	overflow-x: auto;

	// 	&__wrap {
	// 		display: grid;
	// 		grid-template-columns: repeat(4, 1fr);
	// 		column-gap: 30px;
	// 	}
	// }

	&__card {
		&__cover {
			margin-bottom: 8px;

			> img {
				display: block;
				width: 100%;
			}
		}

		&__title {
			font-size: 18px;
			font-weight: normal;
			line-height: 1.78;
			color: $color-brand-blue;
		}
	}

	&__controls {
		display: flex;
		justify-content: flex-end;
		margin-top: 50px;

		> button {
			display: block;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			padding: 0;
			background-color: rgba($color-brand-green, 0.1);
			transition: 0.3s background-color;
			font-size: 14px;
			color: $color-brand-green;

			&:not(:first-child) {
				margin-left: 8px;
			}

			&:disabled {
				opacity: 0.3;
				pointer-events: none;
				cursor: default;
			}
		}
	}

	@include media-breakpoint-up(lg) {
		&__card {
			&__title {
				display: inline-flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				transition: 0.3s color;

				&:after {
					opacity: 0;
					content: '\e804';
					display: inline-flex;
					justify-content: center;
					align-items: center;
					flex-shrink: 0;
					width: 48px;
					height: 48px;
					margin-left: 15px;
					border-radius: 50%;
					background-color: rgba($color-brand-green, 0.1);
					font-family: fontello;
					font-size: 14px;
					color: $color-brand-green;
					transition: 0.3s opacity;
				}
			}

			&:hover {
				#{$self}__card__title {
					color: $color-brand-green;

					&:after {
						opacity: 1;
					}
				}
			}
		}

		&__controls {
			> button {
				&:hover {
					background-color: rgba($color-brand-green, 0.3);
				}
			}
		}
	}

	@include media-breakpoint-down(md) {
		&__header {
			&__wrap {
				grid-template-columns: 1fr;
			}
		}

		&__body {
			@include mobile-scrollbar;
			padding: 0;

			&__wrap {
				grid-template-columns: 10px repeat(4, 278px) 10px;

				&:before,
				&:after {
					content: '';
				}
			}
		}
	}

	@include media-breakpoint-down(sm) {
		&__header {
			&__wrap {
				grid-template-columns: 1fr;
				row-gap: 0;
			}
		}

		&__title {
			margin-bottom: 25px;

			br {
				display: none;
			}
		}

		&__body {
			&__wrap {
				grid-template-columns: 1px repeat(4, 278px) 1px;
				column-gap: 20px;
			}
		}
	}
}
