.ct-changelog-wrapper {
	> h2 {
		text-align: center;
	}

	ul {
		margin: 0;

		li {
			display: flex;
			// align-items: center;
			margin-bottom: 15px;
			// font-weight: 500;
			line-height: 20px;

			&:last-child {
				margin-bottom: 0;
			}

			a {
				margin-left: 3px;
				text-decoration: none;
			}

			span {
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 0 0 21px;
				width: 21px;
				height: 21px;
				margin-right: 12px;
				border-radius: 100%;

				&:before {
					color: #fff;
					font-size: 9px;
					font-weight: 800;
					text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
				}

				&.new {
					background: #46bf55;

					&:before {
						content: 'N';
					}
				}

				&.fix {
					background: #ffc568;

					&:before {
						content: 'F';
					}
				}

				&.improvement {
					background: var(--accentColor);

					&:before {
						content: 'U';
					}
				}
			}
		}
	}

	// styles
	code {
		position: relative;
		margin: -2px 5px 0 5px;
		border-radius: 2px;
		background: rgba(0, 0, 0, 0.03);
	}

	.changelog-info {
		@media (min-width: 783px) {
			display: flex;
			align-items: center;
		}

		border-top: none;
		margin-bottom: 50px;
		font-weight: 500;

		&:not(.has-sources) {
			justify-content: center;
		}

		&.has-sources {
			justify-content: space-between;
		}

		ul {
			display: flex;

			li {
				margin-bottom: 0;
			}
		}
	}

	// explanation
	.changelog-explanation li {
		&:not(:last-child) {
			@media (max-width: 782px) {
				margin-right: 15px;
			}

			@media (min-width: 783px) {
				margin-right: 30px;
			}
		}
	}

	// sources
	.changelog-sources {
		@media (max-width: 782px) {
			margin-bottom: 30px;
		}

		li {
			cursor: pointer;

			&:not(:last-child) {
				margin-right: 15px;

				&:after {
					content: '|';
					color: #687c93;
					margin-left: 15px;
				}
			}

			&.active,
			&:hover {
				color: var(--accentColor);
			}
		}
	}

	// items
	.changelog-items {
		// max-height: 550px;
		// overflow-x: scroll;

		section {
			&:not(:last-of-type) {
				margin-bottom: 50px;
				padding-bottom: 40px;
				border-bottom: 1px solid rgba(226, 230, 235, 0.7);
			}

			&:first-of-type {
				padding-top: 40px;
				border-top: 1px solid rgba(226, 230, 235, 0.7);
			}

			> h2 {
				display: flex;

				@media (max-width: 549px) {
					flex-direction: column;
				}

				@media (min-width: 550px) {
					align-items: center;
					justify-content: space-between;
				}

				font-size: 17px;
				margin: 0 0 20px 0;

				span {
					font-size: 13px;
					font-weight: 400;
					opacity: 0.6;
				}
			}
		}
	}
}