.tmpl-rds {
	&__banner {
		.banner-default__text-content {
			display: block;
		}
		.banner-default__text-content--center {
			@include media-min($medium) {
				grid-column: 1 / span 12;
			}
			@include media-min(1200px) {
				grid-column: 2 / span 10;
			}
		}
		h1 {
			font-size: 40px;
			font-weight: 700;
			line-height: 48px;
			color: var(--h2-color);
			@include media-min($medium) {
				font-size: 72px;
				line-height: 76px;
				margin-bottom: 32px;
			}
			.text-violet {
				color: #c76ff2;
			}
			.text-blue {
				color: #509dea;
			}
		}
		p {
			font-size: 26px;
			font-weight: 300;
			line-height: 30px;
			color: #a2adb9;
			width: 90%;
			text-align: center;
			margin: auto;
		}
		.button-group {
			margin: 48px auto;
			justify-content: center;
			flex-wrap: wrap;
		}
	}
	&__company {
		margin: 100px 0 40px;
		.title {
			font-size: 17px;
			color: #fff;
			text-align: center;
			padding-bottom: 26px;
		}
		.gallery {
			max-width: 860px;
			width: 100%;
			margin: auto;
			gap: 46px;
			overflow: hidden;
			display: flex;
			mask-image: linear-gradient(
				90deg,
				transparent 0,
				#000 128px,
				#000 calc(100% - 128px),
				transparent
			);
			ul {
				animation: horizon-scroll 25s linear infinite;
				display: flex;
				gap: 46px;
				list-style: none;
				margin: 0;
				li {
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 0;
					width: max-content;
				}
			}
			@keyframes horizon-scroll {
				0% {
					transform: translateX(0);
				}
				100% {
					transform: translateX(-1877px);
				}
			}
		}
	}
	&__overview {
		.block-title {
			h2 {
				color: #000;
			}
		}
		.table-wrapper {
			overflow: hidden;
			overflow-x: auto;
		}
		table {
			border-color: #28333e;
			box-shadow: none;
			background-color: transparent;
			th {
				font-size: 20px;
				font-weight: 500;
				line-height: 20px;
				color: #fff;
				padding: 10px;
				@include media-min($medium) {
					padding: 20px 30px;
				}
				border-color: #28333e;
				background-color: #28333e99;
				&:nth-of-type(2) {
					background: rgba(40, 51, 62, 0.75);
				}
				&:nth-of-type(3) {
					width: 35%;
				}
			}
			tr {
				td {
					font-size: 16px;
					font-weight: 300;
					line-height: 20px;
					border-color: #28333e;
					padding: 10px;
					@include media-min($medium) {
						padding: 20px 30px;
					}
					&:nth-of-type(1) {
						font-weight: 700;
					}
					&:nth-of-type(2) {
						background: #28333e26;
					}
					b {
						font-weight: 500;
					}
				}
			}
		}
	}
	&__compare {
		.cards {
			display: flex;
			flex-direction: column;
			gap: 14px;
			transition: all 0.2s;
			@include media-min($medium) {
				flex-direction: row;
			}
		}
		.card {
			position: relative;
			width: 100%;
			border: 1px solid rgba(40, 51, 62, 1);
			padding-left: 16px;
			padding-bottom: 10px;
			padding-right: 10px;
			transition: all 0.8s;
			cursor: pointer;
			@include media-min($medium) {
				padding-left: 46px;
			}
			&-content {
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				@include media-min($medium) {
					flex-direction: row;
				}
			}
			&-text-wrapper {
				max-width: 460px;
			}
			&-image {
				flex: 1;
			}
			@include media-min($medium) {
				&-text {
					p {
						width: 458px;
					}
					&-wrapper {
						overflow: hidden;
						width: 0;
						max-height: 280px;
						display: flex;
					}
				}
			}
			&::after {
				content: "";
				position: absolute;
				left: 0;
				bottom: 0;
				width: 0;
				height: 4px;
			}
			@keyframes bar {
				0% {
					width: 0;
				}
				100% {
					width: 100%;
				}
			}
			&:nth-of-type(1) {
				background: #010202;
			}
			&:nth-of-type(2) {
				background: #010202;
			}
			.title {
				font-size: 40px;
				font-weight: 700;
				line-height: 30px;
				color: #fff;
				padding-top: 70px;
				padding-bottom: 32px;
			}
			ul {
				margin-top: 16px;
			}
			&.active {
				@include media-min($medium) {
					flex-shrink: 0;
					width: 67%;
					.card-text-wrapper {
						width: auto;
					}
				}
				&:nth-of-type(1) {
					background: linear-gradient(-90.08deg, #000000 0.07%, #10487b 119.9%);
					&:after {
						background: #509dea;
						width: 100%;
						animation: bar 4s;
					}
				}
				&:nth-of-type(2) {
					background: linear-gradient(-90.08deg, #000000 0.07%, #2f1c3b 119.9%);
					&:after {
						width: 100%;
						background-color: rgba(93, 19, 125, 1);
						animation: bar 4s;
					}
				}
			}
		}
	}
	&__model {
		.block-title {
			@include media-min(1200px) {
				width: 80%;
			}
		}
		&.block-media-content {
			h5 {
				font-size: 24px;
				font-weight: 700;
				line-height: 29px;
			}
			p,
			ul {
				color: #a2adb9;
			}
			.block-media-content__image-container {
				width: 90%;
				@include media-min($medium) {
					width: 100%;
				}
			}
			@include media-min($medium) {
				[data-image-alignment="right"][data-image-size="medium"] {
					--grid-areas: "txt txt txt txt txt txt img img img img img img";
				}
			}
			@include media-min($large) {
				[data-image-alignment="right"][data-image-size="medium"] {
					--grid-areas: ". txt txt txt txt txt img img img img img img";
				}
			}
			.button-link {
				white-space: normal;
				.flex-1 {
					flex: 1;
				}
			}
		}
		.workload-1 {
			stroke-dasharray: 1000;
			stroke-dashoffset: 1000;
			animation: animateStrokeDash 5s linear infinite;
		}
		.workload-tip-1 {
			animation: showOn10 5s linear infinite;
		}
		.workload-tip-2 {
			animation: showOn25 5s linear infinite;
		}
		.workload-tip-3 {
			animation: showOn70 5s linear infinite;
		}
		@keyframes animateStrokeDash {
			100% {
				stroke-dashoffset: 0;
			}
		}
		@keyframes showOn10 {
			0%,
			3% {
				opacity: 0;
			}
			5%,
			100% {
				opacity: 1;
			}
		}
		@keyframes showOn25 {
			0%,
			30% {
				opacity: 0;
			}

			35%,
			100% {
				opacity: 1;
			}
		}
		@keyframes showOn70 {
			0%,
			50% {
				opacity: 0;
			}

			55%,
			100% {
				opacity: 1;
			}
		}
		.rds-workload-1 {
			width: 0;
			animation: animateWidth 5s linear infinite;
		}
		@keyframes animateWidth {
			100% {
				width: 100%;
			}
		}
		.rds-workload-2 {
			stroke-dasharray: 526;
			stroke-dashoffset: 526;
			animation: animateStrokeDash 5s linear infinite;
		}
		.rds-workload-3 {
			animation: showOn50 5s linear infinite;
		}
		@keyframes showOn50 {
			0%,
			45% {
				opacity: 0;
			}
			50%,
			100% {
				opacity: 1;
			}
		}
	}
	&__team {
		.block-title {
			h5 {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-wrap: wrap;
				.icon-heart {
					width: 56px;
					height: 56px;
					margin: 0 12px;
					display: block;
					background: url(https://static.pingcap.com/files/2024/11/05220743/heart.svg)
						no-repeat center/contain;
				}
			}
		}
		.cards {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 32px;

			@include media-min($medium) {
				grid-template-columns: 1fr 1fr 1fr 1fr;
			}
			.card {
				max-width: 252px;
				&:nth-of-type(1) {
					.content {
						border-top: 1px solid #2c80ce;
					}
				}
				&:nth-of-type(2) {
					.content {
						border-top: 1px solid #50dbd9;
					}
				}
				&:nth-of-type(3) {
					.content {
						border-top: 1px solid #9e4ec4;
					}
				}
				&:nth-of-type(4) {
					.content {
						border-top: 1px solid #dc150b;
					}
				}
			}
			img {
				width: 20px;
				height: 20pz;
			}
			.content {
				margin-top: 10px;
				padding-top: 10px;
				p {
					font-size: 16px;
					font-weight: 300;
					line-height: 24px;
					color: #cfd6d8;
				}
			}
		}
	}
	&__why {
		.block-title {
			h2 {
				color: #000;
			}
			b {
				font-weight: 700;
			}
		}
		.table {
			overflow-x: auto;
			table {
				border-color: #28333e;
				box-shadow: none;
			}
			td {
				border-color: #28333e;
				padding: 20px;
			}
			td[rowspan="2"] {
				font-family: var(--font-moderat-mono);
				font-size: 24px;
				font-weight: 700;
				line-height: 76px;
			}
			li {
				margin-bottom: 0;
			}
		}
		.why-tabs {
			margin: 70px 0;
			.block-tabs-slide__tab {
				&.active {
					.block-tabs-slide__tab-title {
						color: #28333e;
					}
				}
			}
			.block-tabs-slide__tab-title {
				font-size: 22px;
				font-weight: 500;
				line-height: 31px;
				color: #abb0b4;
				border-color: #a2adb9;
				&:before {
					background-color: #28333e;
					bottom: 0;
					height: 2px;
				}
			}
			.block-tabs-slide__content-title {
				color: #000;
			}
			.block-tabs-slide__content-text {
				@include media-min($medium) {
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					padding: 16px 0;
				}
			}
			&__content-title {
				color: #000;
				margin-bottom: 16px;
				p,
				li {
					color: #000;
					font-size: 20px;
				}
				ul {
					margin-left: 0;
					margin-top: 16px;
				}
			}
			.button-link {
				color: #000;
				&:hover {
					&:after {
						background-color: #000;
						border-radius: 50%;
						color: #fff;
						transform: rotate(45deg);
					}
				}
			}
			&__code {
				overflow: hidden;
				overflow-x: scroll;
				flex: 1;
				color: #000;
				background-color: #e8ebec;
				padding: 36px 24px;
				display: flex;
				align-items: center;
				&-container {
					width: 100%;
				}
				ul {
					margin-top: 24px;
				}
				p,
				li {
					color: #000;
					font-size: 20px;
				}
				pre[class*="language-"] {
					white-space: normal;
					padding: 30px 16px;
				}
				span {
					color: #000;
				}
			}
		}
		.rds-cards {
			border: 1px solid #a2adb9;
			background-color: #fff;
			@include media-min($medium) {
				display: flex;
			}
			.card {
				padding: 20px;
				flex: 1;
				display: flex;
				flex-direction: column;

				p {
					font-size: 22px;
				}
				.content {
					flex: 1;
					margin-top: 24px;
					background: #e5e8eb;
					border-radius: 8px;
					padding: 24px 16px;
					.text {
						display: flex;
						align-items: center;
						border: 1px solid #000;
						border-radius: 8px;
						padding: 8px;
						height: 100%;
					}
				}
				& + .card {
					border-left: 1px solid #a2adb9;
				}
			}
		}
	}
	&__started {
		.card-bg__title {
			margin-top: 0;
		}
	}
}