.main-page {

	padding: 50px 0;

	.flex { 

		display: flex;
		justify-content: space-between;
		align-items: flex-start;

		@media screen and (max-width: 990px) {
			flex-wrap: wrap;
		}

		.sidebar {

			border: 1px solid var(--grey);
			border-radius: 20px;
			padding: 36px 30px;
			width: 367px;

			@media screen and (max-width: 990px) {
				width: 100%;
				padding: 30px;
				margin: 30px 0 0 0;
			}

			.sidebar--title {
				margin: 0 0 20px 0;
				color: var(--primary);
			}

			ul {

				li {

					list-style: none;

					a {
						display: inline-block;
						margin: 0 0 8px 0;
						color: var(--tertiary);
						transition: .3s all;
						&:hover,
						&.active {
							color: var(--primary);
						}
					}

				}

			}

		}

		.page-content {

			width: calc(100% - 467px);

			@media screen and (max-width: 990px) {
				width: 100%;
				order: -1;
			}

		}

	}

}