.avatar {
  height: 57px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  font-family: 'Montserrat';
  font-weight: 300 !important;
  font-size: 13px;
  grid-gap: 10px;
  z-index: 1;
  position: relative;
  top: -8.6em;
  right: -54.2em;
  width: 30%;
    @media (max-width: 1536px) { // Laptop
      top: -9.64em !important;
      right: -49.2em;
      width: 40% !important;
    }
    .bioPic {
      background: none;
      position: absolute;
      top: 0;
      left: 0;
      height: 230%;
      width: 95%;
    } // Avatar
    &::before {
      content: '';
      position: absolute;
      background: var(--react);
      width: 100.2%;
      height: 140%;
      z-index: -1;
      top: -10px;
      left: -28px;
      clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 12% 100%);
    } &::after {
      content: '';
      position: absolute;
      background: var(--react);
      width: 100.5%;
      height: 130%;
      z-index: -1;
      top: 69px;
      left: -30px;
      clip-path: polygon(12.4% 0%, 100% 0%, 88% 100%, 0% 100%);
    }
  }

  .avatar:nth-child(2) {
    position: absolute;
    top: 47px;
    left: 667px;
    width: 33%;
    transform: scale(0.888) rotate(-0.1deg);
    @media (max-width: 1536px) {
      transform: scale(1) rotate(-0.1deg);
    }
    .bioPic {
      background: url(https://raw.githubusercontent.com/strawhat19/React-Portfolio/4b9ecdf3331d8f8cb8fa97a6387f508d9159466e/public/assets/rickyPics/RickySignfull.svg);
      background-size: 100% !important;
      background-position: 50% 50% !important;
      background-repeat: no-repeat;
      height: 265%;
      margin-top: -0.6em;
      transition: 300ms ease-in-out !important;
      @media (max-width: 1536px) {
        margin-top: 11.3em;
        left: -2.9em;
        transform: scale(0.95, 0.9);
      }
    }
    &::before {
        background: transparent;
        top: -9px;
    }
    &::after {
        background: transparent;
    }
}