@import"./style.css?v=2.2.2447143754544745447442";

.content {
    padding: 40px 0;
}
.content__wrap {
    gap: 40px;
}
.content__main__info {
    gap: 16px;
}
.content__main__info {
    color: var(--grey-grey-400, #3E4450);
}
.content__main__info__item {
    align-items: center;
    gap: 7px;
}
.content__main__title {
    margin-top: 8px;
    color: var(--brand-colors-secondary-700, #0D3999);
}
.content__main__thumbnail {
    margin-top: 16px;
}
.content__sidebar {
    padding-top: 71px;
    width: 331px;
    flex-direction: column;
    gap: var(--paddings-padding-3xl, 56px);
}
.content__main {
    width: calc(100% - 371px);
}
.content__main__text {
    flex-direction: column;
    gap: 40px;
    margin-top: 32px;
}
.content__main__text {
    color: var(--grey-grey-400, #3E4450)
}
.content__main__text h2 {
    margin-bottom: -32px;
    color: var(--brand-colors-secondary-700, #0D3999);

    /* Titles/H3 */
    font-family: var(--Titles-h3-Family, Play);
    font-size: var(--Titles-h3-size, 32px);
    font-style: normal;
    font-weight: var(--Titles-h3-weight, 700);
    line-height: 140%; /* 44.8px */
    text-transform: capitalize;
}
.content__main__text ul {
    margin-top: -28px;
    list-style: none;
}
.content__main__text ul li {
    line-height: 1.8;
}
.content__main__text ul li:before {
    content: url("../img/icon/icon-list.svg");
    display: inline-block;
    margin-right: 12px;
    transform: translateY(8px);
}
.content__main__text blockquote {
    padding: 22px 16px;
    border-radius: var(--corners-m, 8px);
    background: var(--brand-colors-secondary-50, #F3F7FF);
    display: flex;
    gap: 24px;
}
.content__main__text blockquote:before {
    content: url("../img/icon/icon-quote.svg");
}
.content__main__text blockquote:after {
    content: url("../img/icon/icon-quote.svg");
    transform: rotate(180deg);
    display: inline-block;
}
.share {
    padding-bottom: var(--paddings-padding-xxl, 40px);
}
.content__main__share {
    padding: var(--paddings-padding-l, 24px);
    gap: 26px;
    color: var(--grey-grey-300, #6B7079);
    border-radius: var(--corners-m, 8px);
    border: 1px solid var(--grey-grey-100, #C4C5C9);
    width: fit-content;
}
.content__main__share__links {
    align-items: center;
    gap: var(--paddings-padding-l, 24px);
}
.content__main__share__links a {
    height: 33px;
}
.content__main__share__links a:focus {
    outline: none;
}
.content__sidebar__author {
    align-items: center;
    gap: var(--paddings-padding-m, 16px);
    align-self: stretch;
    border-radius: var(--corners-s-2, 4px);
    border: 1px solid var(--brand-colors-secondary-100, #C5D7FF);
    background: var(--white, #FFF);
}
.content__sidebar__author__thumbnail {
    width: 132px;
}
.content__sidebar__author__info {
    padding-left: var(--paddings-padding-s2, 8px);
    flex-direction: column;
    gap: var(--paddings-padding-s2, 8px);
}
.content__sidebar__author__info__name {
    gap: var(--paddings-padding-s2, 8px);
    align-items: center;
}
.content__sidebar__author__info__name__label,
.content__sidebar__author__info__specialty__value {
    color: var(--grey-grey-400, #3E4450);
}
.content__sidebar__author__info__name__value {
    padding: var(--paddings-padding-s, 4px) 0;
    color: var(--brand-colors-secondary-600, #114CCC)
}
.content__sidebar__author__info__specialty {
    flex-direction: column;
    gap: var(--paddings-padding-s, 4px);
}
.content__sidebar__author__info__specialty__label {
    color: var(--grey-grey-200, #999CA2);
}
.content__sidebar__nav {
    flex-direction: column;
    gap: var(--paddings-padding-s3, 12px);
    position: sticky;
    top: var(--paddings-padding-3xl, 56px);
}
.content__sidebar__nav__item {
    padding: var(--paddings-padding-s, 4px) var(--paddings-padding-s2, 8px);
    color: var(--brand-colors-secondary-700, #0D3999);
    text-decoration: none;
}
.related {
    padding: var(--paddings-padding-xxl, 40px) 0;
}
.related__title {
    color: var(--brand-colors-secondary-700, #0D3999);
}
.related__list {
    flex-wrap: wrap;
    align-items: center;
    gap: var(--paddings-padding-l, 24px);
    align-self: stretch;
    margin-top: var(--paddings-padding-l, 24px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.blog__card {
    height: 100%;
}
.related__item {
    padding-bottom: var(--paddings-padding-s3, 12px);
    flex-direction: column;
    justify-content: space-between;
    gap: var(--paddings-padding-s2, 8px);
    border-radius: var(--corners-m, 8px);
    border: 1px solid var(--brand-colors-secondary-50, #F3F7FF);
    background: var(--white, #FFF);
    text-decoration: none;
    height: 100%;
    transition: all ease 0.3s;
}
.related__item:hover {
    box-shadow: 2px 2px 12px 0 rgba(35, 214, 221, 0.24);
    transform: translate(-1px, -1px);
}
.related__item__top {
    flex-direction: column;
    gap: var(--paddings-padding-s2, 8px);
}
.related__item__thumb,
.related__item__thumb img {
    width: 100%;
}
.related__item__info {
    align-items: center;
    gap: 16px;
    padding: 0 var(--paddings-padding-s3, 12px);
}
.related__item__info__item {
    color: var(--grey-grey-400, #3E4450);
    gap: 7px;
}
.related__item__title {
    color: var(--brand-colors-secondary-700, #0D3999);
    padding: 0 var(--paddings-padding-s3, 12px);
    align-self: stretch;
    font-family: Play, sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    text-transform: capitalize;
}
.related__item__btn {
    align-items: center;
    margin-top: 12px;
    gap: var(--paddings-padding-s3, 12px);
    padding: var(--paddings-padding-s3, 12px) var(--paddings-padding-s3, 12px);
    color: var(--brand-colors-primary-700, #0D9499);
    width: fit-content;
}

.blog__hero {
    padding: var(--paddings-padding-m, 16px) 0 var(--paddings-padding-xxl, 40px) 0;
    background: #060620;
}
.blog__hero__title {
    margin-top: var(--paddings-padding-xxl, 40px);
    color: var(--brand-colors-primary-600, #11C6CC);
}
.blog__hero__descr {
    margin-top: var(--paddings-padding-s3, 12px);
    color: var(--brand-colors-primary-100, #C5FDFF);
}
.blog__main {
    padding: var(--paddings-padding-xxl, 40px) 0 var(--paddings-padding-l, 24px) 0;
}
.blog__main__title {
    color: var(--grey-grey-400, #3E4450);
}
.blog__main__filter {
    margin-top: var(--paddings-padding-s3, 12px);
    align-items: center;
    align-content: center;
    gap: 8px var(--paddings-padding-s2, 8px);
    align-self: stretch;
    flex-wrap: wrap;
}
.blog__main__filter__item {
    width: 137px;
    height: 50px;
    padding: var(--paddings-padding-s2, 8px) var(--paddings-padding-s3, 12px);
    justify-content: center;
    align-items: center;
    color: var(--grey-grey-400, #3E4450);
    border-radius: var(--corners-s, 0);
    border: 1px solid var(--brand-colors-secondary-100, #C5D7FF);
    background: var(--white, #FFF);
    cursor: pointer;
}
.blog__main__filter__item_clear {
    border: none;
    color: var(--grey-grey-100, #C4C5C9);
    gap: 10px;
}
.blog__main__cards {
    margin-top: var(--paddings-padding-xxl, 40px);
    gap: var(--paddings-padding-l, 24px);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.blog__main__cards.loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity .3s;
}
.blog__main__filter__item:hover {
    border-color: var(--brand-colors-primary-600, #11C6CC);
}
.blog__main__filter__item.active {
    background: #0D9499;
    color: #fff;
}
.blog__main__see-more-wrapper {
    margin-top: var(--paddings-padding-l, 24px);
    padding: var(--paddings-padding-xxl, 40px) 0 var(--paddings-padding-l, 24px) 0;
}
.blog__main__see-more {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 187px;
    height: 44px;
    color: var(--brand-colors-primary-700, #0D9499);
    border: none;
    outline: none;
    cursor: pointer;
    background: transparent;

}

.related__item__btn:hover, .related__item__btn:hover svg path, .blog__main__see-more:hover {
    color: #15F7FF;
    fill: #15F7FF;
    cursor: pointer;
    transition: all ease 0.3s;
}

.blog__subscription {
    padding: 40px 0;
}

.blog__subscription__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    align-self: stretch;
}

.blog__subscription__block {
    display: flex;
    padding: 24px 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 2px 2px 12px 0 rgba(35, 214, 221, 0.24);
}

.blog__subscription__text {
    align-self: stretch;
    color: #082666;
    text-align: center;
    font-family: Play, sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    text-transform: capitalize;
}

.blog__subscription__inputs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    align-self: stretch;
}

.contacts-form-inputs.blog__subscription__input .contacts-form-text,
.contacts-form-inputs.blog__subscription__input input.contacts-form-text {
    display: flex;
    height: 54px;
    padding: 16px;
    align-items: center;
    gap: 0;
    align-self: stretch;
    border-radius: 70px;
    border: 1px solid #9ABAFF;
    background: #FFF;
    max-width: 399px;
    resize: none;
}

p {
    display: flex;
}
.article p {
    display: block;
}



@media (max-width: 992px) {
.content__wrap {
    flex-direction: column;
}
.content__main, .content__sidebar {
    width: 100%;
}
.content__sidebar__nav {
    display: none;
}
.content__sidebar__author {
    justify-content: space-between;
}
.related__list {
    gap: var(--paddings-padding-m, 16px);
    grid-template-columns: repeat(1, 1fr);
}
.related__item:nth-child(3) {
    display: none;
}

.blog__hero__title {
    font-size: 40px;
}

.blog__main {
    display: flex;
    padding: 24px 0 0 0;
}

.blog__main__cards {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
}

.blog__main__see-more-wrapper {
    margin-top: 40px;
    padding: 24px 0 20px 0;
}

.blog__subscription {
    padding: 24px 0 40px 0;
}

.blog__subscription__block {
    padding: 40px;
}

.blog__subscription__inputs {
    flex-direction: column;
    gap: 20px;
}

.blog__hero {
    padding: 16px 0 24px 0;
}
}

@media (max-width: 576px) {
.content__main__text h2 {
    font-size: var(--Titles-h3-size, 24px);
}

    .blog__hero__title {
        font-size: 32px;
    }

    .blog__hero {
        padding: 12px 0 20px 0;
    }

    .blog__main__title {
        font-size: 20px;
    }

    .blog__main__filter {
        justify-content: space-between;
    }

    .blog__main__filter__item {
        width: 48%;
    }

    .blog__main__cards {
        gap: 16px;
    }

    .related__item__btn {
        margin-top: 12px;
    }

    .blog__main__see-more-wrapper {
        padding: 20px 0 16px 0;
        margin-top: 16px;
    }

    .blog__subscription {
        padding: 20px;
    }

    .blog__subscription__block {
        padding: 32px 20px;
    }

}