.text-sidebar {
	position: relative;
	--text-sidebar-margin-block: 60px;
	--text-sidebar-padding-inline: 20px;
	--text-sidebar-sidebar-position: absolute;
	--text-sidebar-sidebar-width: 490px;
	--text-sidebar-sidebar-padding: 56px 20px 49px;
	--text-sidebar-sidebar-border-radius: 10px 0 0 10px;
	--text-sidebar-sidebar-margin-top: 0;
	margin-block: var(--text-sidebar-margin-block);
	padding-inline: var(--text-sidebar-padding-inline);
}

.text-sidebar-container {
	width: var(--container-width-normal, 1180px);
	max-width: 100%;
	margin-inline: auto;
}

.text-sidebar-text {
	width: var(--container-width-narrow, 640px);
	max-width: 100%;
}

.text-sidebar-text > *:last-child {
	margin-bottom: 0;
}

.text-sidebar-sidebar {
	position: var(--text-sidebar-sidebar-position);
	top: 0;
	right: -100%;
	margin-top: var(--text-sidebar-sidebar-margin-top);
	transition: right 1s;
	width: var(--text-sidebar-sidebar-width);
	max-width: 100%;
	padding: var(--text-sidebar-sidebar-padding);
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: var(--clr-secondary-light, #f8f9ff);
	border-radius: var(--text-sidebar-sidebar-border-radius);
}
.text-sidebar-sidebar > img {
	max-width: 240px;
	max-height: 240px;
	margin-bottom: 28px;
}
.text-sidebar-sidebar > h4, .text-sidebar-sidebar > p {
	text-align: center;
	width: 360px;
	max-width: 100%;
	margin-bottom: 10px;
}
.text-sidebar-sidebar > a {
	margin-top: 16px;
	margin-bottom: 0;
}
.text-sidebar-sidebar > a:not(.button) {
	font-weight: 600;
	position: relative;
}

@media screen and (max-width: 1179px) {
	.text-sidebar {
		--text-sidebar-sidebar-width: 350px;
	}
}

@media screen and (max-width: 1023px) {
	.text-sidebar {
		--text-sidebar-margin-block: 35px;
		--text-sidebar-sidebar-position: initial;
		--text-sidebar-sidebar-padding: 38px 20px;
		--text-sidebar-sidebar-border-radius: 10px;
		--text-sidebar-sidebar-margin-top: 35px;
	}
}