#learning-contents {
  width: 100%;
	background-color: #F6F9FC;
	padding-block: 80px 0;

	.step {
		width: 100%;
		max-width: 1200px;
		margin-inline: auto;

		@media (max-width: 768px) {
			width: 100%;
			padding-inline: 16px;
		}
	}

	.client {
		width: 100%;
		position: relative;
		background: linear-gradient(180deg, rgba(255, 48, 206, 0.20) -3.48%, rgba(0, 161, 255, 0.20) 103.48%), #FFF;
		padding-bottom: 90px;

		@media (max-width: 768px) {
			padding-bottom: 80px;
		}

		.clip-path {
			width: 100%;
			height: min(calc(100vw * (165 / 375)), 165px);
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;

			@media (max-width: 768px) {
				height: min(calc(100vw * (63 / 375)), 63px);
			}

			&::before {
				content: '';
				display: block;
				position: absolute;
				clip-path: polygon(0% 0%, 0 2px, 50% 100%, 100% 2px, 100% 0);
				background-color: #F6F9FC;
				width: 100%;
				height: 100%;
				top: -2px;
				left: 0;
			}

			.client-dots {
				width: 8px;
				display: flex;
				flex-direction: column;
				gap: 16px;
				z-index: 1;
	
				@media (max-width: 768px) {
					width: 5.95px;
					gap: 10.58px;
				}
	
				& svg {
					width: 100%;
					aspect-ratio: 1 / 1;
					object-fit: contain;
				}
			}
		}


		.client-img {
			width: 100%;
			max-width: 1200px;
			margin-inline: auto;
			padding-top: 40px;
	
			@media (max-width: 768px) {
				width: 100%;
				padding-top: 32px;
				padding-inline: 16px;
			}
		}
	}


	.media-card {
		display: flex;
		flex-direction: column;
		gap: 7px;
		position: relative;
		z-index: 1;

		@media (max-width: 768px) {
			gap: 30px;
		}

		&::before {
			@media (max-width: 768px) {
				content: '';
				position: absolute;
				z-index: -1;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				width: 2px;
				background-color: #D43977;
				margin: auto;
			}
		}

		.media-card__item {
			width: 100%;
			overflow: hidden;
			border: 2px solid #D43977;
			border-radius: 12px;
			background-color: #ffffff;
	
			@media (max-width: 768px) {
				border-radius: 6px;
			}

			.media-card__header {
				display: flex;
				align-items: center;
				gap: 12px;
				height: 64px;
				padding-inline: 24px;
				background: linear-gradient(90deg, #D43977 5.77%, #821742 94.23%);

				@media (max-width: 768px) {
					gap: 8px;
					height: 55.8px;
					padding-inline: 24px 0;
				}

				@media (max-width: 360px) {
					padding-inline: 2% 0;
				}

				.media-card__badge {
					font-size: 2rem;
					font-weight: bold;
					/* font-family: "Open Sans"; */
					line-height: 30px;
					letter-spacing: 0;
					color: #9a780a;
					background-color: #ffffff;
					padding-inline: 16px;
					height: 30px;
					border-radius: 9999px;

					@media (max-width: 768px) {
						font-size: 1.6rem;
						line-height: 23.8px;
						padding-inline: 12.8px;
						height: 23.8px;
					}
				}

				.media-card__label {
					font-size: 2rem;
					font-weight: bold;
					line-height: 1.3em;
					letter-spacing: 0;
					color: #ffffff;

					@media (max-width: 768px) {
						font-size: 1.6rem;
					}

					@media (max-width: 360px) {
						font-size: 4.26666667vw;
					}
				}
			}

			.media-card__grid {
				display: grid;
				grid-template-columns: 320px auto;
				gap: 30px;
				padding: 30px 20px 36px;

				@media (max-width: 768px) {
					grid-template-columns: auto;
					grid-template-rows: repeat(auto);
					gap: 20px;
					padding: 30px 20px 40px;
				}

				.media-card__text {
					display: flex;
					flex-direction: column;
					gap: 20px;

					@media (max-width: 768px) {
						gap: 16px;
					}

					.media-card__title {
						font-size: 2.2rem;
						font-weight: bold;
						line-height: 1.5em;
						letter-spacing: 0;
						color: #374151;

						@media (max-width: 768px) {
							font-size: 2rem;
						}
					}

					.media-card__tags {
						display: flex;
						flex-wrap: wrap;
						gap: 7px;

						.media-card__tag {
							font-size: 1.3rem;
							font-weight: 500;
							line-height: 29px;
							letter-spacing: 0;
							color: #1a1a1a;
							background-color: #e7ebff;
							padding-inline: 16px;
							height: 29px;
							border-radius: 9999px;

							@media (max-width: 768px) {
								font-size: 1.2rem;
								line-height: 25px;
								padding-inline: 8px;
								height: 25px;
							}
						}
					}

					.media-card__description {
						font-size: 1.6rem;
						font-weight: 400;
						line-height: 1.6em;
						letter-spacing: 0;
						color: #374151;
					}
				}
			}
		}

		.media-card__arrow {
			width: 40px;
			margin-inline: auto;

			@media (max-width: 768px) {
				display: none;
			}
		}
	}

}