.banner {
  padding: 24px;
  display: grid;
  grid-template-rows: auto;
  gap: 16px;
  border-radius: 16px;
  background-repeat: no-repeat;
  background-size: auto;
  background-position: bottom center;
}
.banner_orange50 {
  background-color: var(--orange50);
}
.banner.banner_offer {
  padding: 32px 24px;
  background-size: contain;
}
.banner__content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
}
.banner.banner_offer .banner__content {
  gap: 24px;
}

.banner_yandex_stars {
	padding: 28px 16px 0;
	background-color: var(--orange50);
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	background-repeat: no-repeat;
}
.banner_yandex_stars.banner_yandex_stars_wide {
	padding: 32px 32px 0;
}
.banner_yandex_stars.banner_yandex_stars_blog {
	background-color: var(--yellow200);
}
.banner_yandex_stars .banner__content {
	justify-content: center;
}
.banner_yandex_stars .banner__image {
	width: auto;
	height: auto;
	border-radius: 12px 12px 0 0;
	justify-self: flex-end;
	align-self: flex-end;
}
.banner_yandex_stars.banner_yandex_stars_wide .banner__image {
	margin-bottom: 1px;
	border-top: 1px solid var(--blue100);
	border-right: 1px solid var(--blue100);
	border-left: 1px solid var(--blue100);
}
.banner_yandex_stars.banner_yandex_stars_wide .banner__image {
	border-radius: 16px 16px 0 0;
}
.banner_yandex_stars.banner_yandex_stars_blog .banner__title {
	font-size: 18px;
}
.banner_yandex_stars.banner_yandex_stars_blog .banner__text {
	font-size: 14px;
}

@media (max-width: 575px) {
	.banner_yandex_stars.banner_yandex_stars_blog {
		margin-bottom: 48px;
	}
	/* .banner_yandex_stars.banner_yandex_stars_blog .banner__text {
		font-size: 18px;
	} */
}

@media (min-width: 576px) and (max-width: 991px) { 
	.banner_yandex_stars.banner_yandex_stars_blog {
		padding: 24px 32px 0;
		grid-template-columns: 52% 42%;
	}
	.banner_yandex_stars.banner_yandex_stars_blog .banner__content {
		justify-content: center;
		padding-bottom: 24px;
		gap: 8px;
	}
}

@media (min-width: 576px) { 
  .banner {
    padding: 48px;
  }
  .banner.banner_offer {
    padding: 48px 32px;
  }
	.banner_yandex_stars {
		padding: 48px 48px 0;
	}
	/* .banner_yandex_stars.banner_yandex_stars_wide {
		background-image: url('i/bg-ellipse-yellow-1.png');
		background-position: right -166px top -102px;
	} */
	.banner_yandex_stars.banner_yandex_stars_blog {
		margin-bottom: 64px;
	}
	.banner_yandex_stars.banner_yandex_stars_blog .banner__title {
		font-size: 24px;
	}
	.banner_yandex_stars.banner_yandex_stars_blog .banner__text {
		font-size: 16px;
	}
}

@media (min-width: 992px) { 
  .banner.banner_offer {
    min-height: 338px;
    padding: 48px;
    background-position: bottom right 48px;
  }
  .banner.banner_offer .banner__content {
    max-width: 496px;
    gap: 32px;
  }
	.banner_yandex_stars {
		padding: 32px 32px 0;
	}
	.banner_yandex_stars.banner_yandex_stars_blog {
		margin-bottom: 24px;
	}
	.banner_yandex_stars.banner_yandex_stars_wide {
		padding: 48px 48px 0;
		grid-template-columns: minmax(52%, 58%) minmax(40%, 451px);
		gap: 48px;
		background-image: url('i/bg-ellipse-yellow-1.png'), url('i/bg-right-half-ellipse-yellow-1.png');
		/* background-position: left 53.5% top -300px, right -4% bottom -290px; */
		background-position: left 71.5% top -305px, right -2.2% bottom -300px;
	}
	.banner_yandex_stars.banner_yandex_stars_wide .banner__content {
		padding-bottom: 48px;
	}
}

@media (min-width: 1100px) { 
  .banner.banner_offer .banner__content {
    max-width: 526px;
  }
}

@media (min-width: 1200px) { 
  .banner {
    gap: 32px;
    background-position: bottom right;
  }
	.banner_yandex_stars {
		gap: 24px;
	}
	.banner_yandex_stars.banner_yandex_stars_wide {
		min-height: 210px;
		gap: 32px;
	}
	.banner_yandex_stars.banner_yandex_stars_wide .banner__image {
		margin-bottom: 2px;
		border-top: 2px solid var(--blue100);
		border-right: 2px solid var(--blue100);
		border-left: 2px solid var(--blue100);
	}
}