:root {
  --primary-color: #FFDA05;
  --secondary-color: #FFB905;
  --color-text: #0C0D0D;
}

.theme-blue {
  --primary-color: #405DFF;
  --secondary-color: #2F4DFF;
  --color-text: #fff;
}

.blog-hero .breadcrumbs__list, .blog-hero .breadcrumbs-post {
  margin-bottom: 1rem;
}

.post {
  padding-top: 0;
}
.post .post__tags {
  margin: 0 auto 35px 15vw;
}
.post .container-full {
  padding: 0 20px;
}
.post__wrap {
  display: grid;
  grid-template-columns: 15% 85%;
  position: relative;
}
.post__left {
  width: 100%;
  position: sticky;
  height: fit-content;
  top: 90px;
  left: 0;
}
.post__right, .post__inner {
  width: 60%;
}
.post__inner {
  margin: 0 auto;
}
.post__title {
  font-size: 72px;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 35px;
}
@media screen and (max-width: 1600px) {
  .post__title {
    font-size: 50px;
  }
}
@media screen and (max-width: 1400px) {
  .post__title {
    font-size: 40px;
  }
}
.post__info {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 40px;
}
.post__info > p {
  position: relative;
}
.post__info > p:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -30px;
  width: 20px;
  height: 1px;
  background-color: #fff;
}
.post__time, .post__views {
  display: flex;
  align-items: center;
  gap: 8px;
}
.post__leave {
  font-size: 16px;
  padding: 20px;
  justify-content: center;
  margin-top: 10px;
}
.post__feedback:nth-child(1) {
  margin-left: 0px;
}
.post__feedback:nth-child(2) {
  margin-left: 30px;
}
.post__feedback:nth-child(3) {
  margin-left: 60px;
}
.post__feedback:nth-child(4) {
  margin-left: 90px;
}
.post__feedback:nth-child(5) {
  margin-left: 120px;
}
.post__feedback:nth-child(6) {
  margin-left: 150px;
}
.post__feedback:nth-child(7) {
  margin-left: 180px;
}
.post__feedback:nth-child(8) {
  margin-left: 210px;
}
.post__feedback:nth-child(9) {
  margin-left: 240px;
}
.post__feedback:nth-child(10) {
  margin-left: 270px;
}
.post__feedback-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.post__feedbacks {
  width: 80%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.post__feedbacks .default-feedback__img {
  width: 15%;
  min-width: 100px;
  min-height: 100px;
}
.post__feedbacks .default-feedback__img.mobile {
  display: none;
}
.post__feedbacks .default-feedback__content {
  width: 80%;
}
@media screen and (max-width: 1530px) {
  .post__right, .post__tags {
    min-width: 900px;
  }
}
@media screen and (max-width: 1024px) {
  .post {
    padding: 40px 0 30px;
  }
  .post__right, .post__tags {
    min-width: unset;
  }
  .post .post__tags {
    margin: 0 0 20px;
  }
  .post__title {
    width: 100%;
  }
  .post__wrap {
    grid-template-columns: 1fr;
  }
  .post__left {
    position: static;
    order: 2;
  }
  .post__content {
    padding-bottom: 40px;
    margin-bottom: 0;
    border-bottom: unset;
  }
  .post__right {
    width: 100%;
    max-width: unset;
    min-width: unset;
  }
  .post__inner {
    width: 100%;
    min-width: unset;
  }
  .post__feedbacks {
    width: 100%;
  }
  .post__feedbacks .default-feedback__content {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .post__feedbacks .default-feedback__img.desktop {
    display: none;
  }
  .post__feedbacks .default-feedback__img.mobile {
    display: flex;
    width: 70px;
    height: 70px;
    min-width: unset;
    min-height: unset;
    margin-bottom: 20px;
  }
  .post__feedbacks .default-feedback__links {
    position: static;
    justify-content: flex-start;
  }
  .post__feedbacks .default-feedback__outer {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .post__title {
    font-size: 34px;
    margin-bottom: 20px;
  }
  .post__info {
    gap: 22px;
  }
  .post__info > p:not(:last-child)::after {
    right: -16px;
    width: 10px;
  }
}

.review__top {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}
.review .review__text {
  margin-bottom: 0;
}
.review .review__title {
  font-size: 42px;
  font-weight: 500;
  line-height: 1.1;
  margin: 60px 0 30px;
  color: #fff;
}
.review__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}
.review .review__submit {
  font-size: 16px;
  font-weight: 500;
  text-decoration: unset;
  justify-content: center;
  height: fit-content;
}
.review .review__submit:hover {
  color: #0C0D0D;
}
.review__mark {
  font-size: 34px;
  font-weight: 500;
  color: #fff;
  width: 55px;
}
.review__agree .default-text {
  font-size: 14px;
}
.review__agree a {
  text-decoration: unset;
}
@media screen and (max-width: 1024px) {
  .review__list {
    grid-template-columns: 1fr;
  }
  .review__wrap {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  .review__list {
    display: contents;
  }
  .review__list .modern-input:first-child {
    order: 1;
  }
  .review__list .modern-input:nth-child(2) {
    order: 2;
  }
  .review__agree {
    order: 3;
    margin-bottom: 20px;
  }
  .review__submit {
    order: 4;
  }
}
@media screen and (max-width: 768px) {
  .review__top {
    flex-wrap: wrap;
    gap: 15px;
  }
  .review__text {
    width: 100%;
  }
  .review .review__title {
    font-size: 28px;
    margin: 60px 0 20px;
  }
}

.toc__list {
  margin-bottom: 40px;
}
.toc__item {
  text-decoration: underline;
  text-underline-offset: 3px;
  width: fit-content;
  cursor: pointer;
}
.toc__item:hover {
  text-decoration: unset;
}

.share {
  margin: 0 auto;
  width: fit-content;
}
.share__count {
  display: flex;
  align-items: center;
  flex-direction: column;
  font-weight: 500;
  padding-bottom: 24px;
  margin-bottom: 32px;
  width: fit-content;
  padding-right: 45px;
  position: relative;
}
.share__count::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.5);
}
.share__count span {
  font-size: 34px;
  line-height: normal;
}
.share__count p {
  font-size: 18px;
  line-height: 1.11;
  color: rgba(255, 255, 255, 0.5);
}
.share__success {
  display: none;
  position: absolute;
  top: 50%;
  left: 100%;
  padding-left: 10%;
  transform: translateY(-50%);
  font-size: 14px;
}
.share__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.share__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  background-color: #3B3B3B;
  position: relative;
  transition: 0.3s ease;
}
@media screen and (min-width: 1025px) {
  .share__item:hover {
    color: #fff;
  }
  .share__item:hover .share__amount {
    opacity: 1;
    visibility: visible;
  }
  .share__item:hover .share__success {
    color: #fff;
    user-select: none;
  }
}
.share__amount {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -100%;
  padding-left: 8px;
  width: 48px;
  height: 33px;
  font-weight: 500;
  color: rgba(12, 13, 13, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='48' height='34' viewBox='0 0 48 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='path-1-inside-1_551_127498' fill='white'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.06972 0.5C7.51743 0.5 7.06972 0.947714 7.06972 1.5V9.41826C7.0674 9.4204 7.06509 9.42255 7.06278 9.42472L0.314871 15.7716C-0.104957 16.1665 -0.104957 16.8335 0.314871 17.2284L7.06278 23.5753C7.06509 23.5774 7.0674 23.5796 7.06972 23.5817V32.5C7.06972 33.0523 7.51743 33.5 8.06972 33.5H46.9919C47.5442 33.5 47.9919 33.0523 47.9919 32.5V1.5C47.9919 0.947715 47.5442 0.5 46.9919 0.5H8.06972Z'/%3E%3C/mask%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.06972 0.5C7.51743 0.5 7.06972 0.947714 7.06972 1.5V9.41826C7.0674 9.4204 7.06509 9.42255 7.06278 9.42472L0.314871 15.7716C-0.104957 16.1665 -0.104957 16.8335 0.314871 17.2284L7.06278 23.5753C7.06509 23.5774 7.0674 23.5796 7.06972 23.5817V32.5C7.06972 33.0523 7.51743 33.5 8.06972 33.5H46.9919C47.5442 33.5 47.9919 33.0523 47.9919 32.5V1.5C47.9919 0.947715 47.5442 0.5 46.9919 0.5H8.06972Z' fill='white'/%3E%3Cpath d='M7.06972 9.41826L7.74846 10.1526L8.06972 9.85571V9.41826H7.06972ZM7.06278 9.42472L6.3777 8.69626L6.37765 8.6963L7.06278 9.42472ZM0.314871 15.7716L-0.370258 15.0432L-0.370258 15.0432L0.314871 15.7716ZM0.314871 17.2284L-0.370258 17.9568H-0.370257L0.314871 17.2284ZM7.06278 23.5753L7.74794 22.8469L7.74791 22.8469L7.06278 23.5753ZM7.06972 23.5817H8.06972V23.1445L7.7487 22.8476L7.06972 23.5817ZM8.06972 1.5V1.5V-0.5C6.96515 -0.5 6.06972 0.395428 6.06972 1.5H8.06972ZM8.06972 9.41826V1.5H6.06972V9.41826H8.06972ZM7.74787 10.1532C7.74813 10.1529 7.74833 10.1528 7.74846 10.1526L6.39097 8.68388C6.38647 8.68804 6.38205 8.69217 6.3777 8.69626L7.74787 10.1532ZM1 16.5L7.74791 10.1531L6.37765 8.6963L-0.370258 15.0432L1 16.5ZM1 16.5L1 16.5L-0.370258 15.0432C-1.20992 15.8329 -1.20991 17.1671 -0.370258 17.9568L1 16.5ZM7.74791 22.8469L1 16.5L-0.370257 17.9568L6.37766 24.3037L7.74791 22.8469ZM7.7487 22.8476C7.74844 22.8474 7.74826 22.8472 7.74813 22.8471C7.74807 22.847 7.74802 22.847 7.74799 22.8469C7.74796 22.8469 7.74794 22.8469 7.74794 22.8469L6.37763 24.3037C6.38223 24.308 6.38662 24.3121 6.39073 24.3159L7.7487 22.8476ZM8.06972 32.5V23.5817H6.06972V32.5H8.06972ZM8.06972 32.5H8.06972H6.06972C6.06972 33.6046 6.96514 34.5 8.06972 34.5V32.5ZM46.9919 32.5H8.06972V34.5H46.9919V32.5ZM46.9919 32.5V34.5C48.0965 34.5 48.9919 33.6046 48.9919 32.5H46.9919ZM46.9919 1.5V32.5H48.9919V1.5H46.9919ZM46.9919 1.5H48.9919C48.9919 0.39543 48.0965 -0.5 46.9919 -0.5V1.5ZM8.06972 1.5H46.9919V-0.5H8.06972V1.5Z' fill='%23DBDBDB' mask='url(%23path-1-inside-1_551_127498)'/%3E%3C/svg%3E%0A");
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease;
}
@media screen and (max-width: 1024px) {
  .share {
    width: 100%;
    margin-bottom: 60px;
  }
  .share__count {
    width: 100%;
    padding: 0 0 20px 0;
    margin-bottom: 15px;
    align-items: flex-start;
  }
  .share__list {
    flex-direction: row;
    width: 100%;
    gap: 40px;
  }
  .share__success {
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    padding-left: 0;
    color: #fff;
  }
}
@media screen and (max-width: 768px) {
  .share__list {
    gap: 0;
    justify-content: space-between;
  }
}