.content_wrapper {
	display: grid;
	grid-template-columns: 1fr calc(300px + calc(var(--padding_soft)) * 2);
	grid-template-areas: "main aside";
}

@media screen and (width < 1024px) {
	.content_wrapper {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		grid-template-areas:
			"main"
			"aside";
	}
}

main {
	grid-area: main;
	min-width: 0;
}
aside:not(.frontpage_general_aside) {
	background: var(--color_bg_hard);
	grid-area: aside;
}

.article_container {
	max-width: 90ch;
	margin-inline: auto;
	margin-block: var(--padding_main);
	& > *:not(figure, img, video) {
		margin-inline: var(--padding_main);
	}
	& .article_header {
		margin-inline: 0;
		margin-block-end: var(--padding_main);
		display: flex;
		flex-direction: column;
		gap: var(--padding_main);
		min-width: 0;
		& .article_header_caption {
			@media screen and (width < 1300px) {
				margin-inline: var(--padding_main);
			}
		}
	}
	& .rubric_bar {
		display: inherit;
		width: fit-content;
		margin-block-end: var(--padding_soft);
	}
	& p {
		margin-block-end: var(--padding_main);
	}
	& .article_title {
		font-size: clamp(2rem, 2vw + 1.5rem, 3.5rem);
		letter-spacing: -0.01em;
		line-height: 1.03;
		font-weight: 800;
		white-space: pre-wrap;
		text-wrap: balance;
		text-align: center;
		margin-block-end: var(--padding_main);
	}
	& .article_subtitle {
		font-family: var(--f_serif);
		font-style: italic;
		text-align: center;
		font-size: clamp(1.6rem, 2vw + 0.5rem, 2rem);
		font-weight: 300;
		line-height: 1.15;
		white-space: pre-wrap;
		text-wrap: pretty;
		margin-block-end: var(--padding_main);
		&:empty {
			display: none;
		}
	}
	& .article_author--wrapper {
		text-align: center;
		& p {
			margin-block-end: inherit;
		}
		& .article_author--title {
			font-size: clamp(0.7rem, 0.72rem + 0.2vw, 0.9rem);
			letter-spacing: 0.2rem;
			text-transform: uppercase;
			opacity: 0.5;
		}
		& .article_author--name {
			font-size: clamp(1rem, 0.92rem + 0.3vw, 1.1rem);
			font-weight: 800;
			line-height: 1.5;
		}
	}
	& .post_indicators {
		margin-block-start: var(--padding_main);
		position: relative;
	}
	& .article_lid {
		font-size: var(--text_size_main);
		font-weight: var(--font_weight_bold);
		margin-block-end: var(--padding_main);
		text-wrap: pretty;
		&:first-of-type {
			&:first-letter {
				font-size: 4rem;
				line-height: 2.5rem;
				vertical-align: top;
				display: inline-block;
				float: left;
				margin: 0 15px 0 0;
				color: var(--color_const_light);
				background: var(--color_brand_main);
				padding: 0.9rem 1rem;
			}
		}
	}
	& .article_sectiontitle {
		font-size: clamp(1.6rem, 2vw + 0.5rem, 2rem);
		margin-block-end: var(--padding_main);
	}
	& .article_text,
	& .pl__text p,
	& .pl__text ul,
	& .pl__text ol {
		font-size: var(--text_size_main);
		font-family: var(--f_serif);
		letter-spacing: 0.007rem;
		max-width: 65ch;
		margin-inline: auto;
		margin-block-end: var(--padding_main);
		text-wrap: pretty;
		/* @media screen and (width < 85ch) {
			padding-inline: var(--padding_main);
		} */
	}
	& > p:has(> img) {
		padding-inline: 0 !important;
		width: 100%;
		max-width: 100%;
	}
	& .article_vrez,
	& .pl__text__big_text {
		margin-block-end: var(--padding_main);
		padding-block: var(--padding_soft);
		line-height: 1.4;
		font-family: var(--f_sans);
		font-weight: var(--font_weight_main);
		font-size: var(--text_size_big);
		text-wrap: pretty;
		border-block: 3px solid var(--color_brand_main);
		display: flex;
		gap: var(--padding_main);
		& img {
			width: 240px;
			object-fit: contain;
		}
		& > p:last-of-type {
			margin-block-end: 0;
		}

		& .js-mtp-gallery-item {
			flex-shrink: 0;
		}
		& .pl__text__big_text_cell_text a {
			all: unset;
			cursor: pointer;
			font-weight: 600;
			font-size: var(--text_size_extrabig);
			line-height: 1.05;
			margin-block-end: 0.4em;
			text-wrap: pretty;
			@media (hover: hover) {
				&:hover {
					text-decoration: underline;
					text-decoration-color: var(--color_brand_main);
				}
			}
			&:focus {
				text-decoration: underline;
				text-decoration-color: var(--color_brand_main);
			}
		}
	}
	& .article_vrez--intext {
		@media screen and (width >= 960px) {
			float: left;
			width: 42%;
			padding: var(--padding_main);
		}
	}
	& .article_quote {
		font-family: var(--f_serif);
		font-size: var(--text_size_extrabig);
		font-style: italic;
		line-height: 1.1;
		text-wrap: pretty;
		position: relative;
		&:before {
			content: "«";
			position: absolute;
			inset-block-start: -3rem;
			inset-inline-start: -1rem;
			opacity: 0.3;
			z-index: -1;
			color: var(--color_brand_ultrasoft);
			font-family: var(--f_sans);
			font-style: normal;
			font-size: 4em;
			font-weight: var(--font_weight_extrabold);
		}
		@media (width > 1200px) {
			&:before {
				inset-inline-start: -2.5rem;
			}
		}
	}
	& figure,
	img,
	video {
		display: block;
		max-width: 100%;
		width: 100% !important;
		height: auto !important;
		margin-block-end: var(--padding_main);
		margin-inline: auto;
	}
	& figure figcaption {
		padding-inline: var(--padding_main);
		margin-block: var(--padding_extrasoft);
		display: flex;
		flex-direction: column;
		@media screen and (width > 1300px) {
			padding-inline: inherit;
		}
	}
	& figcaption .article_picture_caption {
		font-size: clamp(1rem, 0.92rem + 0.3vw, 1.1rem);
		color: var(--color_text_soft);
	}
	& figcaption .article_picture_author {
		font-size: clamp(0.8rem, 0.74rem + 0.3vw, 1.1rem);
		opacity: 0.5;
		color: var(--color_text_extrasoft);
		margin-block: var(--padding_ultrasoft);
	}
	& .article_tip {
		color: var(--color_brand_main);
		text-transform: uppercase;
		font-size: var(--text_size_extrasmall);
		letter-spacing: 0.2em;
	}
	& .article_readmore {
		background: var(--color_bg_hard);
		padding: var(--padding_main);
		margin-block-end: var(--padding_main);
		& a {
			all: unset;
			cursor: pointer;
			position: relative;
			&:before {
				content: "";
				position: absolute;
				inset: -1.2rem;
			}
			@media (hover: hover) {
				&:hover {
					& .article_readmore--title {
						text-decoration: underline;
						text-decoration-color: var(--color_brand_main);
					}
				}
			}
			&:focus,
			&:target {
				& .article_readmore--title {
					text-decoration: underline;
					text-decoration-color: var(--color_brand_main);
				}
			}
		}
		& .article_tip {
			font-family: var(--f_sans);
			margin-block-end: 0.8em;
			color: var(--color_brand_main);
			text-transform: uppercase;
			font-size: var(--text_size_extrasmall);
			letter-spacing: 0.2em;
			margin-inline: 0;
		}
		& .article_readmore--contentwrapper {
			display: flex;
			flex-direction: column;
			gap: var(--padding_extrasoft);
			@media screen and (width >= 720px) {
				flex-direction: row;
			}
			& .article_readmore--cover {
				width: 100%;
				object-fit: contain;
				@media screen and (width >= 720px) {
					width: 15rem;
					min-width: 240px;
					position: relative;
					inset-inline-start: -1.2rem;
				}
				& img {
					width: 100% !important;
					aspect-ratio: 16 / 9;
					object-fit: cover;
					margin-block-end: inherit;
				}
			}
		}
		& .article_readmore--title {
			font-size: var(--text_size_extrabig);
			line-height: 1.05;
			margin-block-end: 0.4em;
			text-wrap: pretty;
		}
		& .post_indicators {
			margin-block-start: inherit;
			& .indicator_comments a {
				&:focus,
				&:target {
					font-weight: 800;
					outline: 2px dotted var(--color_brand_main);
					outline-offset: 0.4em;
				}
				@media (hover: hover) {
					&:hover {
						font-weight: 800;
					}
				}
			}
		}
	}
}

.article_comments--buttonwrapper {
	display: grid;
	place-items: center;
	padding-block-end: var(--padding_main);
}

.article_pressportrets {
	margin-block-end: var(--padding_main);
	& .article_tip {
		margin-block-end: var(--padding_ultrasoft);
	}
	& .pressportrets--wrapper {
		display: grid;
		gap: var(--padding_ultrasoft);
		grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	}
	& a.pressportret--link {
		all: unset;
		cursor: pointer;
		@media (hover: hover) {
			&:hover {
				& .pressportret--name {
					text-decoration: underline;
					text-decoration-color: var(--color_brand_main);
				}
				& .pressportret--cover {
					scale: 1.1;
				}
			}
		}
		&:focus,
		&:target {
			& .pressportret--name {
				text-decoration: underline;
				text-decoration-color: va(--color_brand_main);
			}
			& .pressportret--cover {
				scale: 1.1;
			}
		}
	}
	& .pressportret {
		background: var(--color_bg_hard);
		border: 1px solid var(--color_border_soft);
		display: grid;
		grid-template-columns: auto 1fr;
		gap: var(--padding_extrasoft);
		align-items: center;
		& .pressportret--caption {
			padding-inline-end: 1rem;
		}
		& .pressportret--name {
			font-size: var(--text_size_main);
			font-weight: var(--font_weight_bold);
			overflow-wrap: anywhere;
			margin: inherit;
		}
		& .pressportret--desc {
			font-size: var(--text_size_small);
			color: var(--color_text_extrasoft);
			line-height: 1.1;
			margin: inherit;
			margin-block-end: 0.3em;
		}
		& .pressportret--coverwrapper {
			width: 4rem;
			height: 100%;
			aspect-ratio: 1/1;
			overflow: hidden;
			& .pressportret--cover {
				width: 100%;
				height: 100% !important;
				object-fit: cover;
				margin: inherit;
				transition: all 0.2s ease-in-out;
			}
		}
		& press-portret--title {
			padding-inline: var(--padding_main);
		}
	}
}

.plot {
	margin-block-end: var(--padding_main);
	& .rubric_bar {
		margin-block-end: 0;
	}
	& .plot--wrapper {
		background: var(--color_bg_hard);
		border-block-start: solid var(--color_brand_main);
		& .plot--title {
			font-size: var(--text_size_big);
			line-height: 1.1;
			font-weight: var(--font_weight_ultrabold);
			text-wrap: balance;
			background: var(--color_bg_extrahard);
			padding: var(--padding_extrasoft) var(--padding_main);
		}
		& .plot_items {
			padding: var(--padding_main);
		}
		& .plot_buttonwrapper {
			margin-block-start: var(--padding_main);
			display: flex;
			justify-content: end;
		}
	}
}

.tags_wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: var(--padding_ultrasoft);
	& .tag_item {
		font-size: var(--text_size_extrasmall);
		color: var(--color_text_ultrasoft);
		text-transform: uppercase;
		letter-spacing: 0.15em;
		padding: 0.3em;
		border: 1px dashed currentColor;
		@media (hover: hover) {
			&:hover {
				color: var(--color_brand_main);
			}
		}
		&:focus {
			color: var(--color_brand_main);
		}
	}
	& a {
		all: unset;
		cursor: pointer;
	}
}

.banner {
	background: var(--color_bg_ultrahard);
	width: min(100%, 320px);
	& .banner_300-250 {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 30/25;
	}
}

.article_aside_section {
	position: relative;
	margin-block-end: var(--padding_main);
	height: 100%;
	& .article_aside_bannergroup {
		@media screen and (width > 1024px) {
			min-height: 150vh;
			min-height: 150dvh;
		}
		&.bannergroup--final {
			height: auto;
			min-height: fit-content;
			position: sticky;
			top: var(--header-height);
		}
		& .banner--wrapper {
			position: sticky;
			background: var(--color_bg_hard);
			padding: var(--padding_main);
			width: fit-content;
			margin-inline: auto;
			top: var(--header-height);
			border-block-end: 1px solid var(--color_separator_main);
			z-index: +1;
			display: flex;
			gap: var(--padding_main);
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			@media screen and (width >= 720px) and (width < 1024px) {
				display: grid;
				grid-template-columns: 1fr 1fr auto;
				gap: var(--padding_main);
			}
		}
	}
	& .headlines {
		padding: var(--padding_main);
	}
}

.comments {
	& .comments_counter {
		width: fit-content;
		border-block-start: 4px solid var(--color_brand_main);
		& .comments_counter--title {
			font-weight: var(--font_weight_bold);
			& .comments_counter--number {
				font-weight: var(--font_weight_ultrabold);
				color: var(--color_brand_main);
			}
		}
	}
}

.comments_box {
	& .comment {
		padding-block: var(--padding_main);
		border-block-end: 1px solid var(--color_border_soft);
		& .comment_source {
			display: flex;
			align-items: center;
			gap: var(--padding_soft);
			margin-block-end: var(--padding_extrasoft);
			& .comment_avatar--wrapper {
				background: var(--color_bg_hard);
				width: 3cap;
				height: 3cap;
				border-radius: 50%;
				overflow: hidden;
				position: relative;
				flex: 0 0 auto;
				& .comment_avatar {
					width: 100%!important;
					height: 100%!important;
					object-fit: cover;
				}
			}
			& .comment_name-time {
				& a {
					all: unset;
					cursor: pointer;
					@media (hover: hover) {
						&:hover {
							text-decoration: underline;
							text-decoration-color: var(--color_brand_main);
						}
					}
					&:focus,
					&:active {
						text-decoration: underline;
						text-decoration-color: var(--color_brand_main);
					}
				}
				& .comment_name {
					font-weight: var(--font_weight_ultrabold);
				}
				& .comment_datatime {
					color: var(--color_text_soft);
					font-weight: var(--font_weight_light);
				}
			}
		}
		& .comment_text {
			font-size: var(--text_size_third);
		}
		& .comment_buttons {
			width: fit-content;
			margin-inline: auto;
			& > * {
				padding-inline: var(--padding_extrasoft);
				padding-block: var(--padding_ultrasoft);
			}
			& a {
				cursor: pointer;
			}
			& .comment_like {
				background: rgb(215, 237, 215);
				&:before {
					content: "+";
				}
			}
			& .comment_dislike {
				background: var(--color_brand_ultrasoft);
				&:before {
					content: "-";
				}
			}
		}
		& .comment_btn {
			padding-inline: var(--padding_ultrasoft);
			padding-block: var(--padding_ultrasoft);
			border: none;
			background: var(--color_brand_main);
			color: var(--color_const_light);
			cursor: pointer;
		}
	}
}

.comments_form--wrapper {
	& .comments_form--separate {
		margin-block-end: var(--padding_main);
		padding-block-end: var(--padding_main);
		border-block-end: 1px solid var(--color_separator_main);
	}
	& .comments_form {
		& .comments_form_loginbox {
			& p {
				font-size: var(--text_size_info);
			}
			& .comments_form_loginservices {
				display: flex;
				gap: var(--padding_main);
				& .loginservice--button {
					& a {
						all: unset;
						cursor: pointer;
						@media (hover: hover) {
							&:hover {
								& svg .loginservice_svg--body {
									fill: var(--color_brand_main);
								}
							}
						}
					}
					color: var(--color_text_soft);
					& svg {
						width: 2.2rem;
						height: auto;
						fill: currentColor;
					}
				}
			}
		}
		& .comments_form--textarea {
			display: block;
			width: 100%;
			margin-block: var(--padding_main);
			padding: var(--padding_extrasoft);
		}
		& .comments_form--submitwrapper {
			display: flex;
			justify-content: space-between;
			& .comments_form--rules {
				all: unset;
				cursor: pointer;
				color: var(--color_text_ultrasoft);
				font-weight: 300;
				text-decoration: underline;
			}
			& .comments_form--submit {
				background: var(--color_brand_main);
				color: var(--color_const_light);
				padding: 0.5rem;
				border: none;
				font-weight: var(--font_weight_bold);
				cursor: pointer;
				&:disabled {
					background: var(--color_text_ultrasoft);
					cursor: auto;
				}
			}
		}

		& .comment {
			padding: 0;
			border: none;

			& .comment_source {
				align-items: center;
				gap: var(--padding_main);
			}
		}
	}
}

.flex {
	display: flex;
	align-items: center;
	gap: 16px;

	@media (max-width: 768px) {
		flex-direction: column;
		/* gap: 0; */
	}

	& img {
		width: 120px;
		max-height: max-content;
		object-fit: contain;
	}

	&.article_vrez img {
		margin-block-end: 0;
		width: 240px;
	}
}

blockquote {
	cite {
		display: inline-block;
		margin-block-end: var(--padding_main);
		font-weight: var(--font_weight_bold);
	}
}

.js-mtp-gallery-item {
	position: relative;
	cursor: pointer;
	&::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: calc(100% - 10px);
		height: calc(100% - 10px);
		background-color: var(--color_bg_overlay);
		background-image: url(src/img/glass.svg);
		background-position: center;
		background-repeat: no-repeat;
		opacity: 0;
		transition: opacity 0.3s ease-in-out;
		z-index: 2;
	}

	&:hover {
		&::before {
			opacity: 1;
		}
	}
}

.pswp__button--close {
	position: relative;
	margin-left: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 60px;
	height: 60px;
	cursor: pointer;
}

.pswp__img {
	padding: var(--padding_ultrahard);

	@media (max-width: 576px) {
		padding: var(--padding_soft);
	}
}

.pswp--zoom-allowed .pswp__img {
	object-fit: contain;
}

.pswp__button--arrow--left,
.pswp__button--arrow--right {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.pswp__button--arrow--left {
	inset-inline-start: var(--padding_soft);
}

.pswp__button--arrow--right {
	inset-inline-end: var(--padding_soft);
}

.pswp__button--arrow--right::before {
	background-image: url(src/img/arrow-right.svg);
}

.pswp__button--arrow--left::before {
	background-image: url(src/img/arrow-left.svg);
}

.swiper-slide .article_picture {
	margin-block-end: 0;
}

.swiper-button {
	width: auto;
	height: auto;
	&::after {
		content: none;
	}
}

.swiper {
	min-width: 0;
}

.swiper-container {
	min-width: 0;
	margin-bottom: var(--padding_main);
	/* display: grid; */
}

/* .article_header_cover {
  .swiper-slide {
    max-width: 100%;
    width: auto !important;
  }
} */

.article_header_cover {
	@media screen and (width < 1300px) {
		padding-inline: var(--padding_main);
	}
}

.plot {
	margin-block-end: var(--padding_main);
	& .rubric_bar {
		margin-block-end: 0;
	}
	& .plot--wrapper {
		background: var(--color_bg_hard);
		border-block-start: solid var(--color_brand_main);
		& .plot--title {
			font-size: var(--text_size_big);
			line-height: 1.1;
			font-weight: var(--font_weight_ultrabold);
			text-wrap: balance;
			background: var(--color_bg_extrahard);
			padding: var(--padding_extrasoft) var(--padding_main);
		}
		& .plot_items {
			padding: var(--padding_main);
			&:empty {
				display: none !important;
			}
			& > a:empty {
				display: none !important;
			}
			&:has(a:empty) {
				display: none !important;
			}
			& a.plot--itemwrapper {
				display: none !important;
			}
			& .plot--itemwrapper {
				all: unset;
				cursor: pointer;
				font-size: var(--text_size_main);
				font-weight: var(--font_weight_bold);
				display: block;
				padding-block-end: var(--padding_main);
				border-block-end: 1px solid var(--color_separator_main);
				margin-block-end: var(--padding_main);
				&:empty {
					display: none !important;
				}
				@media (hover: hover) {
					&:hover {
						& .plot_item {
							text-decoration: underline;
							text-decoration-color: var(--color_brand_main);
						}
					}
				}
				&:empty {
					display: none !important;
				}
				& > a:empty {
					display: none !important;
				}
				&:has(a:empty) {
					display: none !important;
				}
				& .plot_item--date {
					font-size: var(--text_size_info);
					& > .datetime_time {
						font-weight: 700;
						padding-inline-end: var(--padding_extrasoft);
						color: var(--color_brand_extrasoft);
						filter: saturate(0.4);
					}
					& > .datetime_date {
						font-weight: 300;
						padding-inline-end: var(--padding_extrasoft);
						color: var(--color_text_extrasoft);
						opacity: 0.6;
					}
				}
			}
		}
		& .plot_buttonwrapper {
			margin-block-start: var(--padding_main);
			display: flex;
			justify-content: end;
		}
	}
}

.nav-slider {
	margin: 20px 0 0;
}

.nav-slider .swiper-slide div {
	padding: 5px;
}

.nav-slider .swiper-slide-thumb-active div {
	border: 1px solid #aa2020;
}

.mtp-gallery-item {
	aspect-ratio: 3 / 2;
	border: none !important;
	padding: 0 !important;
	margin-bottom: var(--padding_hard);
}