.article__header {
	--block-offset: 40px;
	display: grid; gap: 40px;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: 
		"title image"
		"date  image";
}

.article__header .article__title {
	grid-area: title;
	font-weight: 400;
    font-size: 65px;
    line-height: 1.2;
    color: var(--white);
	align-self: end;
	margin-top: var(--block-offset);
}

.article__date { 
    grid-area: date;
	font-weight: 400;
    font-size: 24px;
    line-height: 1;
    color: var(--white);
    justify-self: start;
    align-self: start;
	margin-bottom: var(--block-offset);
}

.article__image { 
	grid-area: image; 
	align-self: stretch;
	justify-self: stretch;
	border-radius: var(--radius-lg);
	margin-block: var(--block-offset);
}

.article__body {
	padding-block: 100px 70px;
}

.article__body .article__title {
	font-weight: 400;
    font-size: 50px;
    line-height: 1.5;
    color: var(--white);
}

.article__text {
	margin-top: 70px;
	font-weight: 400;
    font-size: 20px;
    line-height: 1.2;
    color: var(--white);
}

.article__body .article__title span {
	margin-top: 30px;
	font-weight: 400;
    font-size: 36px;
    line-height: 1;
    color: var(--white);
}

.article-page .article .advice {
	margin-top: 70px;
	display: flex; gap: 40px;
	align-items: center;
	padding: 30px;
	background-color: var(--white-a15);
	border-radius: var(--radius-lg);
}

.article-page .article .advice__title {
	font-weight: 400;
    font-size: 50px;
    line-height: 1;
    color: var(--white);
	white-space: nowrap;
}

.article-page .article .advice__text {
	font-weight: 400;
    font-size: 20px;
    line-height: 1.2;
    color: var(--white);
}



@media screen and (max-width: 1000px) {
	.article__header {
		--block-offset: 10px;
		gap: 20px;
		grid-template-columns: 1fr;
		grid-template-areas:
			"title"
			"image"
			"date";
	}
	.article-page .article .advice {
		flex-direction: column;
	}
}