/*=============== CARD ===============*/
.container{
   height: 100vh;
   display: grid;
   place-items: center;
   margin-inline: 1.5rem;
   padding-block: 7rem;
}

.card{
   &__article{
      position: relative;
      align-self: flex-end;
      display: flex;
      justify-content: center;
   }
   &__profile,
   &__mask{
      width: 100px;
      height: 100px;
      background-color: var(--gray-color);
      border-radius: 50%;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: flex-end;

      & img{
         width: 95px;
      }
   }
   &__profile{
      border: 4px solid var(--container-color);
      z-index: 5;
      transition: opacity .4s, transform .4s;
   }
   &__tooltip{
      position: absolute;
      bottom: -2rem;
      padding-bottom: 5rem;
      transition: opacity .4s, bottom .4s cubic-bezier(.6, -.5, .3, 1.5);
      pointer-events: none;
      opacity: 0;
   }
   &__content{
      position: relative;
      width: calc(100vw - 3rem);
      background-color: var(--container-color);
      box-shadow: 0 16px 32px hsla(230, 50%, 20%, .1);
      padding: 2rem 1.5rem;
      border-radius: 1.5rem;

      &::after{
         content: '';
         width: 32px;
         height: 32px;
         background-color: var(--container-color);
         position: absolute;
         left: 0;
         right: 0;
         bottom: -.75rem;
         margin-inline: auto;
         border-radius: .25rem;
         rotate: 45deg;
      }
   }
   &__header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 1.5rem;
      margin-bottom: 1.5rem;

      & span{
         color: var(--title-color);
         font-weight: 500;
      }
   }
   &__social{
      display: flex;
      column-gap: .75rem;

      & a{
         font-size: 1.25rem;
         color: var(--title-color);
      }
   }
   &__image{
      width: 100px;
      height: 100px;
      position: relative;
      margin: 0 auto 1rem;
   }
   &__status{
      width: 12px;
      height: 12px;
      background-color: var(--second-color);
      position: absolute;
      top: .5rem;
      right: .75rem;
      border-radius: 50%;
      border: 2px solid var(--container-color);
   }
   &__data{
      text-align: center;
   }
   &__name{
      font-size: var(--h2-font-size);
      color: var(--title-color);
      font-weight: 600;
      margin-bottom: .25rem;
   }
   &__profession{
      font-size: var(--normal-font-size);
      font-weight: 500;
      margin-bottom: 2rem;
   }
   &__button{
      display: inline-flex;
      align-items: center;
      column-gap: .5rem;
      color: var(--first-color);
      font-weight: 500;

      & i{
         font-size: 1.25rem;
      }
   }
}

.card{
   // Scale profile image
   &__article:hover &__profile{
      transform: scale(.8);
      opacity: .7;
   }
   // Show tooltip card
   &__article:hover &__tooltip{
      opacity: 1;
      pointer-events: initial;
      bottom: 4rem;
   }
}