.rds-hero {
	padding: 0;
	font-family: $trevas-font-book;
	color: black;
	@include dark {
		color: white;
	}

	@media only screen and (min-width: 1000px) and (max-width: 1000px) {
		padding-left: 30px;
		padding-right: 30px;

		.row {
			flex-wrap: nowrap;
		}

		.col--7 {
			min-width: 1500px;
		}

		.col--5 {
			flex: 1 !important;
			max-width: none !important;
		}
	}

	@include mobile {
		padding: 71px 0 62px;
	}

	.row {
		align-items: center;

		.col {
			margin-top: 20px;
			margin-bottom: 20px;
			@include tablet-mobile {
				&:first-child {
					order: 2;
				}

				&:last-child {
					order: 1;
				}
			}
			@include mobile {
				margin-top: -20px;
				margin-bottom: -20px;
			}
		}
	}

	.hero-title {
		margin: 0;
		line-height: 1.1;
		font-size: 50px;
		font-weight: 500;

		@include tablet-mobile {
			text-align: center;
		}

		@include mobile {
			line-height: 1.25;
			font-size: 32px;
		}
	}

	.hero-subtitle {
		margin: 0 0 10px 40px;
		padding: 0 10px 0 10px;
		color: $trevas-purple;
		background-color: $trevas-dark;
		font-family: $trevas-font-book;
		font-size: 150%;
		font-weight: bold;

		@include tablet-mobile {
			text-align: center;
		}

		@include mobile {
			margin-top: 13px;
			font-size: 14px;
		}
	}

	img {
		text-align: center;
		height: 200px;
	}

	.boxes {
		display: flex;
		@include mobile {
			flex-direction: column;
			margin-top: 36px;
		}

		.box {
			flex: 1;
			position: relative;
			border: 1px dashed $trevas-purple;
			border-radius: 10px;
			transition: background-color 0.2s ease-in-out;

			@include mobile {
				margin: 0 auto;
				width: 80%;
			}

			&:hover {
				background-color: $trevas-purple;
				color: white;
			}

			&:not(:first-child) {
				@include desktop-tablet {
					margin-left: 12px;
				}

				@include mobile {
					margin-top: 25px;
				}
			}

			.bg {
				display: none;
				position: absolute;
			}

			&.box-explore .bg {
				top: 900px;
				left: 520px;
			}

			&.box-collaborators .bg {
				top: 900px;
				left: 520px;
			}

			.icon {
				display: flex;
				align-items: center;
				padding: 5px 21px 0;
				height: 69px;

				@include mobile {
					justify-content: center;
				}

				svg {
					@include mobile {
						zoom: 1.1;
					}
				}
			}

			.text {
				padding: 0 16px 23px 21px;

				@include mobile {
					padding-bottom: 25px;
				}

				.title {
					margin: 0;
					line-height: 1.5;
					font-size: 18px;
					font-weight: 400;

					@include mobile {
						text-align: center;
						line-height: 1.2;
						font-size: 22px;
					}
				}

				.description {
					margin: 10px 0 0 0;
					line-height: 1.5;
					font-size: 14.5px;

					@include mobile {
						margin-top: 10px;
						text-align: center;
						line-height: 1.6;
						font-size: 16px;
					}
				}

				.more {
					display: flex;
					align-items: center;
					margin-top: 14px;
					line-height: 1.2;
					font-size: 14.5px;
					font-weight: 700;
					fill: black;

					@include mobile {
						justify-content: center;
						font-size: 16px;
					}

					svg {
						margin-left: 8px;
						flex: 0 0 14px;

						path {
							transition: fill 0.2s ease-in-out;
						}
					}
				}
			}

			.text .more svg path {
				fill: $trevas-purple;
			}

			&:hover .text .more svg path {
				fill: white;
			}

			.link {
				z-index: 5;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				overflow: hidden;
				text-indent: -9999px;
				cursor: pointer;
			}
		}
	}

	.illustration {
		max-width: 100%;

		@media only screen and (min-width: 997px) and (max-width: 1100px) {
			float: right;
			margin-left: 0;
			zoom: 0.8;
		}

		@include tablet-mobile {
			display: block;
			margin: 0 auto 48px;
			zoom: 0.48;
		}
	}
}