.article {
  .article__content {
    padding-bottom: 5.2%;
  }

  .article__info {
    display: flex;
    justify-content: center;
    gap: 10.9%;
    padding-bottom: 5.7%;
  }

  .article__column {
    max-width: 49.375rem;
  }

  .column_width {
    max-width: 16.875rem;
  }
}

.column {
  .column__item:not(:last-child) {
    margin-bottom: 7.7%;
  }

  .item_margin:not(:last-child) {
    margin-bottom: 22.2%;
  }
}

.item {
  .item__image img {
    max-width: 100%;
    object-fit: cover;
    transition: all 0.3s ease-in-out;

    &:hover {
      opacity: 0.7;
    }
  }

  .item__card {
    position: relative;
    margin-top: -17.6%;
    left: 3.7%;
    border-radius: 0.3125rem;
  }
}

.card {
  width: 92.4%;
  background-color: #fff;
  box-shadow: 0px 0.1875rem 0.625rem 0px rgba(0, 0, 0, 0.1);

  .card__content {
    padding: 1.875rem;
  }

  .card__label {
    width: 3.875rem;
    height: 1.375rem;

    &:not(:last-child) {
      margin-bottom: 2.8%;
    }
  }

  .card__title {
    font-size: 1.5625rem;
    line-height: 112%;
    color: #171717;

    &:not(:last-child) {
      margin-bottom: 2.1%;
    }

    &:hover {
      text-decoration: underline;
    }
  }

  .card__time {
    font-style: italic;

    &:not(:last-child) {
      margin-bottom: 1.9%;
    }
  }

  :is(.card__time, .card__title) {
    display: block;
  }

  :is(.card__time, .card__text) {
    font-weight: 400;
  }
}

/* ANOTHER-INFO */

.item {
  .item__person-name {
    font-size: 1.125rem;
    color: #171717;
  }

  .item__person-hobbies {
    color: #999;

    &:not(:last-child) {
      margin-bottom: 5.1%;
    }
  }

  .item__text {
    font-size: 0.9375rem;
    line-height: 166%;

    &:not(:last-child) {
      margin-bottom: 7.7%;
    }
  }

  :is(.item__person-hobbies, .item__text) {
    font-weight: 400;
  }
}

.item-posts {
  .item-posts__title {
    font-size: 1.125rem;
    color: #171717;

    &:not(:last-child) {
      margin-bottom: 8.5%;
    }
  }

  .item-posts__post:not(:last-child) {
    margin-bottom: 14.4%;
  }
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 3.125rem;
  border-radius: 0.3125rem;
  color: #ffffff;
  background-color: #232323;
  transition: all 0.3s ease-in-out;

  &:hover {
    color: #232323;
    background-color: #ffffff;
  }
}

.post {
  position: relative;

  .post__label {
    position: absolute;
    top: 6.8%;
    left: 7.4%;
    width: 3.875rem;
    height: 1.375rem;
  }

  .post__title {
    display: block;
    font-size: 1.25rem;
    line-height: 140%;
    color: #171717;

    &:not(:last-child) {
      margin-bottom: 10px;
    }

    &:hover {
      text-decoration: underline;
    }
  }

  .post__image {
    transition: all 0.3s ease-in-out;

    &:hover {
      opacity: 0.7;
    }
  }

  .post__time {
    font-style: italic;
  }
}

.item-instagram {
  .item-instagram__title {
    font-size: 1.125rem;
    line-height: 116%;
    color: #171717;

    &:not(:last-child) {
      margin-bottom: 9.2%;
    }
  }

  .item-instagram__content {
    display: flex;
    gap: 0.625rem;
  }

  .item-instagram__image {
    transition: opacity 0.3s ease-in-out;

    & img {
      max-width: 100%;
      object-fit: cover;
    }

    &:hover {
      opacity: 0.8;
    }
  }

  .item-instagram__button {
    position: relative;

    &::before {
      content: url(/Img/Another-info/instagram.svg);
      z-index: 10;
      height: 1.1875rem;
      margin-right: 10px;
    }

    &:hover {
      &::after {
        content: "";
        position: absolute;
        left: 27.3%;
        width: 1.25rem;
        height: 1.25rem;
        border-radius: 0.3125rem;
        background-color: #171717;
      }
    }
  }
}

.tags {
  .tags__title {
    font-size: 1.125rem;
    line-height: 116%;
    color: #171717;

    &:not(:last-child) {
      margin-bottom: 5.5%;
    }
  }

  .tags__item-tags {
    display: flex;
    gap: 0.625rem;

    &:not(:last-child) {
      margin-bottom: 3.7%;
    }
  }
}

.item-tags {
  .item-tags__link {
    font-weight: 400;
    display: inline-block;
    text-align: center;
    padding: 0.4375rem 1rem;
    border-radius: 0.1875rem;
    color: #171717;
    background-color: #ebebeb;
    transition: opacity 0.3s ease-in-out;

    &:hover {
      opacity: 0.7;
    }
  }
}

.email {
  .email__title {
    font-size: 1.125rem;
    line-height: 116%;
    color: #171717;

    &:not(:last-child) {
      margin-bottom: 4%;
    }
  }

  .email__text {
    font-weight: 400;

    &:not(:last-child) {
      margin-bottom: 10%;
    }
  }

  .email__form {
    display: flex;
    gap: 0.625rem;
    flex-direction: column;
  }

  .email__input {
    width: 100%;
    height: 3.125rem;
    padding-inline: 0.9375rem;
    border-radius: 0.1875rem;
    border: 0.0625rem solid #e5e5e5;
    background-color: #fff;
  }

  .email__button {
    font-family: inherit;
  }
}

.image_margin {
  display: inline-flex;

  &:not(:last-child) {
    margin-bottom: 7.4%;
  }
}

/* PAGINATION */

.pagination {
  .pagination__content {
    display: flex;
    gap: 0.625rem;
  }

  .pagination__button-previor::after {
    content: url(/Img/Pagination/arrow-left.svg);
  }

  .pagination__button-next::after {
    content: url(/Img/Pagination/arrow-right.svg);
  }

  :is(.pagination__button, .pagination__button-next, .pagination__button_active, .pagination__button-previor) {
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 100%;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.1875rem;
    color: #171717;
    border: 0.0625rem solid #e5e5e5;
    transition: all 0.3s ease-in-out;
  }

  .pagination__button:hover {
    color: #fff;
    background-color: #000;
  }

  :is(.pagination__button-previor:hover, .pagination__button-next:hover) {
    background-color: #bfbfbf;
  }

  .pagination__button_active {
    color: #fff;
    background-color: #000;
  }
}

/* MEDIA (TABLET) */

@media (max-width: 1023px) {
  aside {
    display: none;
  }
}

/* MEDIA (MOBILE) */

@media (max-width: 767px) {
  .article {
    .article__content {
      padding-bottom: 1.875rem;
    }
  }

  .card {
    .card__content {
      padding: 0.625rem;
    }

    .card__title {
      font-size: 1.25rem;
    }
  }
}