@import './../../styles/variables/index.scss';

.author {
  max-width: 1112px;
  padding: 0 16px;
  margin: 40px auto 80px auto;
  width: 100%;

  @media (min-width: 560px) {
    padding: 0 32px;
  }

  @media (min-width: 900px) {
    padding: 0 43px;
  }

  .share {
    max-width: 1024px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    @media (min-width: 460px) {
      flex-direction: row;
      align-items: center;
    }

    .leftContainer {
      display: flex;
      flex: 1;
      gap: 4px;
      align-items: center;

      .leftCol {
        margin-right: 16px;
        border-radius: 50%;
        overflow: hidden;

        div {
          width: 52px;
          height: 52px;
          display: block;
        }

        img {
          width: 52px;
          height: 52px;
        }
      }

      .rightCol {
        .subTitle {
          color: $medium-blue;
        }
      }
    }
  }

  .btn {
    background: transparent;
    border: none;
    font-weight: bold;
    font-family: $font-family-atak;
    font-size: $font-size-xxdefault;
    display: flex;
    gap: 5px;
    color: $main-blue;
    cursor: pointer;
    margin-left: 66px;

    @media (min-width: 460px) {
      margin-left: 0;
    }

    svg {
      width: 10px;
      height: 10px;
    }
  }

  .textCenter {
    max-width: 770px;
    margin: 120px auto;

    .leftContainer {
      .leftCol {
        img {
          height: 87px;
          width: 87px;
        }
      }
    }
  }

  .socialButtons {
    position: absolute;
    top: 0;
    left: 72px;
    display: flex;

    @media (min-width: 460px) {
      left: auto;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }

    > div {
      overflow: hidden;
      border-radius: 10px;
      display: flex;
      gap: 10px;

      button {
        svg {
          display: block;
          width: 42px;
          height: 42px;
        }
      }
    }
  }
}

.container {
  position: relative;
}