.articlePage__header {
display: flex;
flex-direction: row;
gap: 30px;
}
.articlePage__header_col {
flex: 1;
display: flex;
}
.articlePage__header-content {
margin-top: auto;
margin-bottom: 0;
}
.articlePage__header-content > h1 {
font-size: 50px;
font-weight: 400;
line-height: 102%;
margin-bottom: 14px;
color: var(--title-color);
}
.articlePage__stickers-title {
display: flex;
flex-direction: row;
gap: 10px;
margin-bottom: 32px;
}
.articlePage__sticker {
width: fit-content;
font-size: 16px;
font-weight: 300;
padding: 4px 10px;
border-radius: 50px;
color: var(--text-color-main);
background-color: #fff;
}
.articlePage__subtitle-wrap > span {
display: inline-block;
font-size: 22px;
font-weight: 400;
color: var(--text-color-black);
margin-bottom: 14px;
}
.articlePage__subtitle-wrap > ul {
margin-top: 0;
margin-bottom: 0;
counter-reset: li;
list-style: none;
padding-left: 0;
}
.articlePage__subtitle-wrap > ul li::before {
content: counter(li, decimal-leading-zero);
counter-increment: li;
margin-right: 8px;
font-size: 22px;
font-weight: 400;
line-height: 25px;
color: var(--text-color-light);
}
.articlePage__subtitle-wrap > ul li:first-child::before {
margin-right: 12px;
}
.articlePage__subtitle-wrap > ul li:not(:last-child) {
margin-bottom: 12px;
}
.articlePage__subtitle-wrap a {
font-size: 18px;
font-weight: 300;
color: var(--text-color-main);
}
.articlePage__header-img {
width: 100%;
}
.articlePage__header-img > img {
max-height: 685px;
height: 100%;
width: 100%;
object-fit: cover;
}
.expert__opinion-wrap {
padding: 40px 40px;
display: flex;
flex-direction: row;
gap: 40px;
background-color: #fff;
}
.expert__opinion-img > img{
height: 240px;
min-width: 220px;
object-fit: cover;
object-position: top;
}
.expert__opinion-img .expert__opinion-stick {
display: none;
}
.expert__opinion-stick {
padding: 8px 15px;
background-color: #EEEEF0;
width: fit-content;
font-weight: 500;
font-size: 16px;
color: var(--text-color-black);
margin-bottom: 32px;
}
.expert__opinion-text {
font-size: 19px;
font-weight: 300;
line-height: 142%;
margin-bottom: 32px;
}
.expert__opinion-footer {
display: inline-flex;
flex-direction: column;
gap: 2px;
}
.expert__opinion-footer > span {
font-size: 18px;
}
.expert__opinion-footer > span:first-child {
font-weight: 500;
color: var(--text-color-black);
} 
.expert__opinion-footer > span:last-child {
font-weight: 300;
color: var(--text-color-light);
} 
.rec__banner-wrap {
margin: 80px 0;
display: flex;
flex-direction: row;
gap: 30px;
background-color: #fff;
}
.rec__banner-wrap > img {
width: 270px;
object-fit: cover;
}
.rec__banner-content-wrap {
padding: 40px 40px 40px 0;
}
.rec__banner-content-title {
font-size: 28px;
font-weight: 500;
color: var(--text-color-black);
margin-bottom: 14px;
}
.rec__banner-text {
font-size: 18px;
font-weight: 300;
line-height: 147%;
color: var(--text-color-main);
margin-bottom: 24px;
}
.rec__banner-content-wrap > button,
.rec__banner-content-wrap > .btn__red {
padding: 12px 26px;
font-size: 16px;
color: #fff;
background-color: var(--button-color-main);
transition: var(--default-transition);
}
.rec__banner-content-wrap > button:hover,
.rec__banner-content-wrap > .btn__red:hover {
background-color: var(--button-color-main-hover);
}
.author__text-wrapper {
margin: 36px 0;
display: flex;
flex-direction: row;
gap: 20px;
}
.author__text-wrapper > img {
width: 140px;
height: 140px;
object-fit: cover;
object-position: top;
}
.author__text-content {
padding: 20px 0;
}
.author__text-name {
font-size: 25px;
font-weight: 400;
color: var(--text-color-black);
margin-bottom: 2px;
}
.author__text-descr {
font-size: 18px;
font-weight: 300;
line-height: 147%;
color: var(--text-color-light);
margin-bottom: 14px;
}
.author__text-content .articlePage__sticker {
color: var(--text-color-black);
background-color:#D2D2D7;
}
.related__articles-header > h2 {
font-size: 18px;
font-weight: 300;
color: var(--text-color-light);
margin-bottom: 16px;
}
.related__articles-head-inner {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 20px;
margin-bottom: 36px;
}
.related__articles-head-inner > span {
font-size: var(--title-font-size);
color: var(--title-color);
font-weight: 400;
line-height: 110%;
}
.related__articles-head-inner > a {
display: inline-flex;
align-items: center;
padding: 10px 16px;
font-size: 15px;
font-weight: 500;
color: #fff;
background-color: var(--button-color-main);
transition: var(--default-transition);
}
.related__articles-head-inner > a:hover {
background-color: var(--button-color-main-hover);
}
.articles__slider-wrap {
position: relative;
}
.articles__slider-inner {
overflow: hidden;
}
.article__slide-item:hover .article__slide-img {
opacity: 0.8;
}
.article__slide-item:hover .article__slide-title {
color: var(--text-color-red);
text-decoration: none;
}
.article__slide-img {
position: relative;
height: 370px;
margin-bottom: 24px;
transition: var(--default-transition);
}
.article__slide-img > img {
height: 100%;
width: 100%;
object-fit: cover;
}
.article__slider-stickers {
position: absolute;
display: flex;
flex-direction: row;
gap: 10px;
bottom: 10px;
left: 10px;
}
.article__slide-title {
font-size: 25px;
font-weight: 400;
line-height: 120%;
color: var(--text-color-black);
text-decoration: underline;
margin-bottom: 14px;
transition: var(--default-transition);
}
.article__slide-descr {
font-size: 18px;
font-weight: 300;
line-height: 140%;
color: var(--text-color-main);
}
@media(max-width: 1040px) {
.article__slider-stickers .articlePage__sticker {
font-size: 14px;
}
}
@media(max-width: 992px) {
.articlePage__header {
gap: 20px;
}
.articlePage__header-content > h1 {
font-size: 30px;
margin-bottom: 12px;
margin-top: 30px;
}
.articlePage__sticker {
font-size: 14px;
}
.articlePage__subtitle-wrap > span {
margin-bottom: 12px;
font-size: 19px;
}
.articlePage__subtitle-wrap > ul li::before {
font-size: 19px;
}
.articlePage__subtitle-wrap > ul li {
font-size: 16px;
}
.articlePage__subtitle-wrap a {
font-size: 16px;
}
.articlePage__header-img > img {
height: 384px;
}
.descr__img-full-width {
height: 290px;
}
.expert__opinion-wrap {
padding: 20px 20px;
flex-direction: column;
gap: 24px;
}
.expert__opinion-content .expert__opinion-stick {
display: none;
}
.expert__opinion-img {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.expert__opinion-img .expert__opinion-stick {
display: block;
height: fit-content;
font-size: 14px;
padding: 6px 10px;
}
.expert__opinion-img > img {
min-width: 130px;
height: 140px;
}
.expert__opinion-text {
font-size: 16px;
margin-bottom: 20px;
}
.expert__opinion-footer > span:last-child {
font-size: 15px;
}
.rec__banner-wrap {
gap: 20px;
margin: 70px 0;
}
.rec__banner-wrap > img {
width: 160px;
}
.rec__banner-content-wrap {
padding: 25px 25px 25px 0;
}
.rec__banner-content-title {
font-size: 22px;
margin-bottom: 6px;
}
.rec__banner-text {
font-size: 16px;
margin-bottom: 10px;
}
.rec__banner-content-wrap > button,
.rec__banner-content-wrap > .btn__red {
font-size: 14px;
padding: 10px 22px;
}
.author__text-wrapper > img {
min-width: 120px;
height: 120px;
}
.author__text-content {
padding: 5px 0;
}
.author__text-name {
font-size: 22px;
}
.author__text-descr {
font-size: 15px
}
.related__articles-header > h2 {
margin-bottom: 10px;
}
.related__articles-head-inner {
margin-bottom: 30px;
}
.related__articles-head-inner > a {
font-size: 14px;
}
.articles__slider-inner {
overflow: visible;
}
.article__slide-img {
height: 320px;
margin-bottom: 20px;
}
.article__slide-title {
font-size: 22px;
margin-bottom: 10px;
}
.article__slide-descr {
font-size: 16px;
}
}
@media (max-width: 600px) {
.articlePage__header {
flex-direction: column-reverse;
gap: 30px;
}
.articlePage__header-img > img {
height: 320px;
}
.articlePage__header-content > h1 {
margin-top: 0;
}
.descr__img-full-width {
height: 240px;
}
.expert__opinion-img {
gap: 18px;
}
.rec__banner-wrap {
flex-direction: column;
}
.rec__banner-wrap > img {
width: 100%;
height: 200px;
}
.rec__banner-content-wrap {
padding: 0 24px 24px 24px;
}
.related__articles-head-inner {
flex-direction: column;
}
.related__articles-head-inner > a {
width: fit-content;
}
}
@media (max-width: 360px) {
.author__text-wrapper {
flex-direction: column;
}
}