#about {
  .page {
    padding-top: 16px;
    @include card-page;
  }

  .content {
    padding: 16px;

    .header {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      @include pc-layout {
        flex-direction: row;
      }
      @include sp-layout {
        flex-direction: column;
      }

      img {
        display: block;
        margin: 0;
        border-radius: 50%;
        border: 4px solid transparent;
        transition: transform 1s ease-out;

        @include pc-layout {
          width: $avatar-size-pc;
          height: $avatar-size-pc;
          min-width: $avatar-size-pc;
          min-height: $avatar-size-pc;
          box-shadow: $card-shadow;

          &:hover {
            animation-play-state: paused;
            transform: rotateZ(360deg);
          }
        }
        @include sp-layout {
          margin-bottom: 16px;
          width: $avatar-size-sp;
          height: $avatar-size-sp;
          min-width: $avatar-size-sp;
          min-height: $avatar-size-sp;
          box-shadow: $card-shadow-light;
        }
      }

      .info {
        margin-left: 16px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        line-height: 1.8;
        text-align: left;

        .icon {
          margin-right: 3px;
        }
      }
    }

    .contact {
      display: flex;
      justify-content: center;
      margin: 16px 0 22px;

      a {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        border: 4px solid $bg-white-dim;
        box-shadow: $card-shadow-light;
        background-color: $bg-dark;
        transition: all 0.3s ease-out;

        img {
          @include pc-layout {
            width: 30px;
            height: 30px;
          }
          @include sp-layout {
            width: 24px;
            height: 24px;
          }
        }

        @include pc-layout {
          margin: 0 30px;
          width: $contact-size-pc;
          height: $contact-size-pc;
          min-width: $contact-size-pc;
          min-height: $contact-size-pc;
          &:nth-child(1) {
            img {
              width: 26px;
              height: 26px;
            }
            &:hover {
              background-color: $concat-email-color;
              box-shadow: 0 0 10px $concat-email-color;
            }
          }
          &:nth-child(2) {
            &:hover {
              background-color: $concat-github-color;
              box-shadow: 0 0 10px $concat-github-color;
            }
          }
          &:nth-child(3) {
            img {
              width: 26px;
              height: 26px;
            }
            &:hover {
              background-color: $concat-telegram-color;
              box-shadow: 0 0 10px $concat-telegram-color;
            }
          }
          &:nth-child(4) {
            &:hover {
              background-color: $concat-music-color;
              box-shadow: 0 0 10px $concat-music-color;
            }
          }
          &:nth-child(5) {
            img {
              width: 24px;
              height: 24px;
            }
            &:hover {
              background-color: $concat-rss-color;
              box-shadow: 0 0 10px $concat-rss-color;
            }
          }
        }
        @include sp-layout {
          margin: 0 20px;
          width: $contact-size-sp;
          height: $contact-size-sp;
          min-width: $contact-size-sp;
          min-height: $contact-size-sp;
        }
      }
    }
  }
}
