@use "../mixins/bem" as *;
@use "../mixins/function" as *;

@include b(homeMyCard) {
  @include e(avatar) {
    width: 100%;

    &.radius {
      img {
        display: block;
        margin: 10px auto;
        width: 100px;
        height: 100px;
        border-radius: 50%;

        &:hover {
          transform: rotate(666turn);
          transition-duration: 59s;
          transition-timing-function: cubic-bezier(0.34, 0, 0.84, 1);
        }
      }
    }

    &.full {
      width: getCssVar("home-card-width");
      height: 100%;
      margin: calc(-1 * getCssVar("home-card-padding")) calc(-1 * getCssVar("home-card-padding")) 10px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  @include e(icons) {
    margin-bottom: 5px;
  }

  @include e(blogger) {
    padding: 5px 5px 0;
    .name {
      font-size: 21px;
      display: block;
      margin-bottom: 6px;
    }
    .slogan {
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      line-clamp: 3;
      -webkit-line-clamp: 3;
    }
  }

  @media (max-width: 768px) {
    text-align: center;
    @include e(avatar) {
      &.full img {
        width: 240px;
      }
    }
  }
}