.article {
  background: #fff;
  border: 1px solid #EDECF5;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  min-height: 20rem;
  transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  justify-content: flex-end;
}
@media only screen and (min-width: 768px) {
  .article {
    height: 45rem;
  }
}
.article__header {
  padding: 1.6rem 2.4rem 0;
}
.article__head {
  display: flex;
  align-items: center;
}
.article__head span {
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 120%;
  color: #606492;
}
.article__head span:not(:first-of-type) {
  margin-left: 1.6rem;
}
.article__head span.article__media {
  background-color: #512D8D;
  border-radius: 0.4rem;
  padding: 0.2rem 0.4rem;
  text-transform: uppercase;
  color: #fff;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .article__head span.article__media {
    font-size: 1.1rem;
  }
}
.article__tags {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: absolute;
  right: 0;
  top: 0;
  gap: 0.5rem;
  margin-left: 1.6rem;
  z-index: 5;
}
.article__tags span:not(:first-of-type) {
  margin: 0;
}
.article__img {
  width: 100%;
  max-height: 16rem;
  background: #eaeaf9;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.2rem;
  overflow: hidden;
  z-index: 0;
}
.article__img .just-watched {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(22, 26, 27, 0.5);
  z-index: 2;
  color: #fff;
}
.article__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.article__person {
  display: flex;
  align-items: flex-end;
  margin-top: -2.6rem;
  padding: 0 1rem;
}
.article__person-img {
  width: 6.6rem;
  height: 6.6rem;
  border-radius: 20rem;
  border: 5px solid #fff;
  box-shadow: 0px 0px 13px rgba(69, 83, 241, 0.1);
  overflow: hidden;
  box-sizing: content-box;
}
.article__person-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.article__person-wrap {
  margin-left: 1rem;
  flex: 1;
}
.article__person-name {
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 140%;
  color: #051322;
}
.article__person-position {
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 140%;
  color: #606492;
  margin-top: 0.2rem;
}
@media only screen and (min-width: 992px) {
  .article__person-position {
    font-size: 1rem;
    line-height: 130%;
  }
}
.article__content {
  padding: 1.2rem 2.4rem 0;
  overflow: hidden;
  z-index: 99;
  transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@media only screen and (min-width: 992px) {
  .article__content {
    border-radius: 12px;
    height: 100%;
    padding: 1.2rem 2.4rem 5.8rem;
  }
}
.article__title {
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 140%;
  color: #051322;
  transition: 0.2s ease-in-out;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3;
}
@media only screen and (min-width: 768px) {
  .article__title {
    min-height: 6.72rem;
  }
}
.article__descr {
  flex: 1;
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 140%;
  color: rgba(5, 19, 34, 0.6980392157);
  margin-top: 1.2rem;
  transition: 0.2s ease-in-out;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 5;
}
.article__descr h1,
.article__descr h2,
.article__descr h3,
.article__descr h4,
.article__descr h5,
.article__descr h6,
.article__descr p,
.article__descr span,
.article__descr li,
.article__descr a {
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.article__descr h1,
.article__descr h2,
.article__descr h3,
.article__descr h4,
.article__descr h5,
.article__descr h6,
.article__descr p,
.article__descr ul,
.article__descr ol {
  margin-bottom: 0.5rem;
}
.article__descr a {
  pointer-events: none;
  color: inherit !important;
  text-decoration: underline;
}
.article__descr h1,
.article__descr h2,
.article__descr h3,
.article__descr h4,
.article__descr h5,
.article__descr h6 {
  line-height: 130%;
}
.article__descr h1,
.article__descr h2,
.article__descr h3,
.article__descr h4,
.article__descr h5,
.article__descr h6,
.article__descr strong,
.article__descr b {
  font-weight: 600;
}
.article__descr li {
  margin-left: 1.6rem;
}
.article__descr ul li {
  list-style: disc;
}
.article__descr img,
.article__descr svg,
.article__descr div,
.article__descr iframe {
  display: none;
}
.article__bttn {
  justify-content: flex-start;
  padding: 0;
  min-height: auto;
  padding: 1.2rem 2.4rem 2.4rem;
  background-color: #fff;
  transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  z-index: 999;
  font-size: 1.6rem;
  color: #512D8D;
}
@media only screen and (min-width: 992px) {
  .article__bttn {
    position: absolute;
  }
}
.article:hover {
  border: 1px solid rgba(69, 83, 241, 0.05);
  box-shadow: 0px 20px 32px rgba(69, 83, 241, 0.16);
}
@media only screen and (min-width: 992px) {
  .article:hover .article__content {
    background-color: #512D8D;
    margin-top: -20.3rem;
    height: 100%;
  }
  .article:hover .article__title {
    -webkit-line-clamp: 5;
    min-height: 0;
  }
  .article:hover .article__descr {
    -webkit-line-clamp: 15;
  }
  .article:hover .article__title, .article:hover .article__descr {
    color: #fff;
  }
  .article:hover .article__bttn {
    background-color: #512D8D;
    color: #0BBAD5;
  }
  .article:hover .article__bttn:after {
    transform: scale(1, -1);
    background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.490159 11.0961C0.0996346 11.4866 0.0996346 12.1198 0.490159 12.5103C0.880683 12.9009 1.51385 12.9009 1.90437 12.5103L0.490159 11.0961ZM12.8039 1.19662C12.8039 0.644336 12.3562 0.196621 11.8039 0.196621L2.80387 0.196621C2.25158 0.19662 1.80387 0.644336 1.80387 1.19662C1.80387 1.74891 2.25158 2.19662 2.80387 2.19662L10.8039 2.19662L10.8039 10.1966C10.8039 10.7489 11.2516 11.1966 11.8039 11.1966C12.3562 11.1966 12.8039 10.7489 12.8039 10.1966L12.8039 1.19662ZM1.90437 12.5103L12.511 1.90373L11.0968 0.489514L0.490159 11.0961L1.90437 12.5103Z' fill='%230BBAD5'/%3E%3C/svg%3E");
  }
}
.article--case .article__img {
  height: 11rem;
}

.button-switch {
  border: 1px solid #ebebf2;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  padding: 0.2rem;
  background: rgba(235, 235, 242, 0.25);
  gap: 0.4rem;
}
@media only screen and (min-width: 768px) {
  .button-switch {
    padding: 0.3rem;
    gap: 0.8rem;
  }
}
.button-switch li {
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 120%;
  color: var(--text);
  transition: 0.2s ease-in-out;
  border-radius: 8px;
  padding: 0.9rem 1.4rem;
  cursor: pointer;
  white-space: nowrap;
}
@media only screen and (min-width: 768px) {
  .button-switch li {
    padding: 1rem 1.6rem;
  }
}
.button-switch li:active {
  transform: scale(0.96);
}
.button-switch li.active {
  color: var(--accent);
  background-color: #fff;
  box-shadow: 0px 0px 4px 0px rgba(96, 100, 146, 0.1490196078);
  animation: bttnClick 0.3s ease-in-out;
}
.button-switch li span:nth-of-type(1):has(+ span:nth-of-type(2)) {
  display: none;
}
@media only screen and (min-width: 768px) {
  .button-switch li span:nth-of-type(1):has(+ span:nth-of-type(2)) {
    display: inline-block;
  }
}
@media only screen and (min-width: 768px) {
  .button-switch li span:nth-of-type(2) {
    display: none;
  }
}
@keyframes bttnClick {
  0% {
    transform: scale(0.96);
  }
  30% {
    transform: scale(0.96);
  }
  80% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}
.button-switch li#magic-line {
  position: absolute;
  background-color: rgba(81, 45, 141, 0.1);
  border: 1px solid #ebebf2;
  bottom: 50%;
  transform: translateY(50%);
  width: 0;
  height: calc(100% - 0.65rem);
  transition: left 0.3s, width 0.3s, opacity 0.3s !important;
  z-index: -1;
  margin: 0 !important;
}

main {
  margin-top: 7rem;
}

.blog {
  min-height: 70rem;
  padding-top: 2rem;
}
@media only screen and (min-width: 992px) {
  .blog {
    padding-top: 4rem;
  }
}
@media only screen and (min-width: 992px) {
  .blog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.blog__title {
  font-weight: 500;
  font-size: 2rem;
  line-height: 130%;
  letter-spacing: -0.02em;
}
@media only screen and (min-width: 992px) {
  .blog__title {
    font-size: 4.4rem;
  }
}
.blog__filter {
  margin-top: 1.6rem;
}
@media only screen and (max-width: 576px) {
  .blog__filter {
    width: calc(100% + 3rem);
    left: -1.5rem;
    padding: 0 1.5rem;
    overflow: auto;
  }
  .blog__filter::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}
@media only screen and (min-width: 992px) {
  .blog__filter {
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.blog__filter-wrap {
  display: inline-flex;
  align-items: center;
  background: inherit;
  overflow-x: auto;
  white-space: nowrap;
  border: 1px solid #EDECF5;
  border-radius: 99px;
  padding: 0.4rem;
  width: max-content;
}
@media only screen and (min-width: 992px) {
  .blog__filter-wrap {
    width: auto;
    left: 0;
    overflow: visible;
  }
}
.blog__filter-wrap li {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.7rem;
  color: #0C0C0C;
  padding: 0.8rem 1.2rem;
  border-radius: 99px;
  cursor: pointer;
  user-select: none;
  background-position: center !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.blog__filter-wrap li img {
  max-width: 1.8rem;
  width: 100%;
  height: auto;
  object-fit: cover;
}
@media only screen and (min-width: 992px) {
  .blog__filter-wrap li {
    padding: 0.8rem 1.6rem;
  }
}
.blog__filter-wrap li + li {
  margin-left: 1rem;
}
.blog__filter-wrap li.active {
  cursor: default;
  background-color: #512D8D;
  color: #fff;
  animation: bttnClick 0.3s ease-in-out;
}
.blog__filter-wrap li.active img {
  filter: brightness(0) invert(1);
}
.blog__filter-wrap li.bttn-loading {
  background-color: rgba(81, 45, 141, 0.1);
}
@keyframes bttnClick {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(0.96);
  }
  80% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}
.blog__filter-category {
  width: 100%;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 120%;
  color: #7c858e;
  border-radius: 20rem;
  padding: 1rem 2rem;
}
@media only screen and (min-width: 992px) {
  .blog__filter-category {
    width: 28rem;
  }
}
.blog__filter-check + .blog__filter-check {
  margin-top: 1.6rem;
}
@media only screen and (min-width: 992px) {
  .blog__filter-check + .blog__filter-check {
    margin-top: 0;
  }
}
.blog__wrap {
  margin-top: 3.2rem;
  flex-wrap: wrap;
}
@media only screen and (min-width: 992px) {
  .blog__wrap {
    min-height: 45rem;
  }
}
@media only screen and (min-width: 992px) {
  .blog__wrap.grid-3 {
    grid-gap: 30px;
  }
}
.blog__nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
}
@media only screen and (min-width: 768px) {
  .blog__nav {
    gap: 2rem;
  }
}
.blog__nav.center-pagination {
  justify-content: center;
}
.blog__nav .page-numbers {
  text-decoration: none;
  width: 4.2rem;
  height: 4.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 3.2rem;
  color: #606492;
  border-radius: 50%;
}
.blog__nav .page-numbers:not(.disabled__nav-btn) {
  cursor: pointer;
}
.blog__nav .page-numbers:not(.disabled__nav-bttn):not(.current):not(.dots):not(.bttn-loading) {
  box-shadow: 0 0 12px 0 rgba(60, 63, 74, 0.04);
  background: rgba(255, 255, 255, 0.25);
}
.blog__nav .page-numbers:not(.disabled__nav-bttn):not(.current):not(.dots):not(.bttn-loading):hover {
  color: #512D8D;
  background-color: rgba(81, 45, 141, 0.1);
}
.blog__nav .page-numbers:hover {
  color: #512D8D;
  background-color: rgba(81, 45, 141, 0.1);
}
@media only screen and (max-width: 768px) {
  .blog__nav .page-numbers {
    width: 3.2rem;
    height: 3.2rem;
  }
}
.blog__nav .page-numbers.dots {
  user-select: none;
  cursor: default;
}
.blog__nav .page-numbers.dots:hover {
  background-color: transparent;
}
.blog__nav .next,
.blog__nav .prev {
  transition: background-color 250ms ease-out;
}
.blog__nav .next svg path,
.blog__nav .prev svg path {
  cursor: default;
  opacity: 1;
  fill: #512D8D;
}
.blog__nav .next.bttn-loading,
.blog__nav .prev.bttn-loading {
  background-color: rgba(81, 45, 141, 0.102);
}
.blog__nav .next.bttn-loading .prev__pag,
.blog__nav .next.bttn-loading .next__pag,
.blog__nav .prev.bttn-loading .prev__pag,
.blog__nav .prev.bttn-loading .next__pag {
  display: none;
}
.blog__nav .next:hover,
.blog__nav .prev:hover {
  background-color: rgba(81, 45, 141, 0.1);
}
.blog__nav .next:hover svg path,
.blog__nav .prev:hover svg path {
  cursor: pointer;
  opacity: 1;
}
.blog__nav .next.disabled__nav-bttn,
.blog__nav .prev.disabled__nav-bttn {
  cursor: default;
  pointer-events: none;
  opacity: 0.25;
}
.blog__nav .next.disabled__nav-bttn:hover svg path,
.blog__nav .prev.disabled__nav-bttn:hover svg path {
  cursor: default;
  opacity: 0.25;
}
.blog__nav .current {
  background: #512D8D;
  color: #ffffff;
  pointer-events: none;
}
.blog__nav .current:hover {
  color: #ffffff;
  cursor: default;
  background: #512D8D;
}
.blog__nav .active__page-numbers:not(.dots) {
  color: #606492;
  cursor: pointer;
  background-color: rgba(81, 45, 141, 0.1);
  border: 1px solid #512D8D;
  pointer-events: all;
}
.blog__nav .active__page-numbers:not(.dots):hover {
  cursor: pointer;
}
.blog__nav .bttn-loading {
  transition: none;
}
.blog .prev__pag,
.blog .next__pag {
  display: flex;
}
.blog a {
  transition: 0.2s ease-in-out;
  user-select: none;
}
.blog .next:hover svg,
.blog .prev:hover svg {
  transition: 0.2s ease-in-out;
  user-select: none;
}
.blog .next:hover svg path,
.blog .prev:hover svg path {
  opacity: 1;
}
@media only screen and (min-width: 992px) {
  .blog .blog__nav {
    margin: 0 auto;
  }
}
.blog__bottom {
  position: relative;
  margin-top: 6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10rem;
}
@media only screen and (min-width: 992px) {
  .blog__bottom {
    margin-bottom: 9.6rem;
  }
}
@media only screen and (max-width: 992px) {
  .blog__bottom {
    padding: 0 1rem !important;
    flex-direction: column;
    gap: 3rem;
  }
}
.blog__more {
  min-width: 15.7rem;
  color: #512D8D;
}
@media only screen and (max-width: 768px) {
  .blog__more {
    font-size: 1.4rem;
  }
}
@media only screen and (min-width: 992px) {
  .blog__more {
    position: absolute;
    right: 1rem;
  }
}