.content {
	 display: flex;
	 gap: 80px;
	 margin-top: 80px;
	 position: relative;
}
 .content article {
	 display: flex;
	 flex-direction: column;
	 gap: 10px;
	 width: 100%;
}
 .content article h2 {
	 margin-bottom: 30px;
}
 .content article p, .content article ul li, .content article ol li {
	 color: var(--white-70);
}
 .content article p {
	 margin-bottom: 10px;
}
 .content article img {
	 margin: 20px 0;
	 border-radius: 20px;
	 box-shadow: 0 0 20px var(--white-20);
}
 .content aside {
	 max-width: 400px;
	 width: 100%;
	 display: flex;
	 flex-direction: column;
	 gap: 20px;
	 position: sticky;
	 top: 20px;
	 height: calc(100vh - 40px);
	 padding: 20px;
	 background: var(--dark-b);
}
 .content aside > div {
	 border: 1px solid var(--white-50);
	 padding: 20px;
	 display: flex;
	 flex-direction: column;
}
 .content aside > div > h3 {
	 margin-bottom: 20px;
}
 .content aside > div.meta {
	 gap: 10px;
}
 .content aside > div.meta p {
	 font-size: 14px;
	 color: var(--white-50);
}
 .content aside > div.meta p::before {
	 font-family: icon;
	 color: var(--blue);
	 font-size: 14px;
	 margin-right: 10px;
}
 .content aside > div.meta p.date::before {
	 content: "\e91c";
}
 .content aside > div.meta p.author::before {
	 content: "\e909";
}
 .content aside > div.meta p.time::before {
	 content: "\e91a";
}
 .content aside > div.meta p.views::before {
	 content: "\e917";
}
 .content aside > div .share {
	 height: fit-content;
	 width: fit-content;
	 font-size: 14px;
	 margin-top: 10px;
	 transition: 0.2s linear;
}
 .content aside > div .share::after {
	 font-family: icon;
	 content: "\e907";
	 font-size: 12px;
	 margin-left: 5px;
	 transition: 0.2s linear;
}
 .content aside > div.posts-promo .items {
	 display: flex;
	 flex-direction: column;
}
 .content aside > div.posts-promo .items a {
	 position: relative;
	 padding: 15px 0;
	 display: flex;
	 flex-direction: column;
}
 .content aside > div.posts-promo .items a h3 {
	 font-size: 16px;
	 font-weight: 300;
	 color: var(--white-50);
	 margin-bottom: 5px;
	 transition: 0.2s linear;
}
 .content aside > div.posts-promo .items a h3::first-letter {
	 text-transform: uppercase;
}
 .content aside > div.posts-promo .items a .meta {
	 display: flex;
	 gap: 5px;
}
 .content aside > div.posts-promo .items a .meta p, .content aside > div.posts-promo .items a .meta span {
	 font-size: 14px;
	 color: var(--white-50);
	 transition: 0.2s linear;
}
 .content aside > div.posts-promo .items a::before {
	 content: '';
	 position: absolute;
	 left: 0;
	 top: 19px;
	 display: flex;
	 align-items: center;
	 margin: auto 0;
	 border: 5px solid transparent;
	 border-left: 5px solid var(--blue);
	 opacity: 0;
	 visibility: hidden;
	 transition: 0.2s linear;
}
 .content aside > div.posts-promo .items a:not(:last-child)::after {
	 content: '';
	 position: absolute;
	 width: 100%;
	 height: 1px;
	 background: var(--white-50);
	 bottom: 0;
	 left: 0;
}
 @media screen and (max-width: 1720px) {
	 .content aside {
		 max-width: 380px;
	}
}
 @media screen and (max-width: 1279px) {
	 .content {
		 flex-direction: column;
	}
	 .content aside {
		 max-width: unset;
		 flex-direction: row;
		 flex-wrap: wrap;
		 height: auto;
	}
	 .content aside > div {
		 min-width: 320px;
	}
}
 @media screen and (max-width: 767px) {
	 .content aside > div {
		 width: 100%;
	}
}
 @media screen and (hover: hover) {
	 .content aside > div.meta .share:hover::after {
		 transform: rotate(45deg) translate(2px, -2px);
	}
	 .content aside > div.posts-promo .items a:hover h3 {
		 color: var(--white);
		 transform: translateX(15px);
	}
	 .content aside > div.posts-promo .items a:hover .meta p, .content aside > div.posts-promo .items a:hover .meta span {
		 color: var(--white);
		 transform: translateX(15px);
	}
	 .content aside > div.posts-promo .items a:hover::before {
		 opacity: 1;
		 visibility: visible;
	}
}