#technology {
  width: 100%;
	background-color: #f9f5f0;
	padding-block: 62px 80px;

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

	.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;
			}
		}
	}

}