// main logo
a {
  &.logo {
    text-decoration: none;

    &:hover {
      svg {
        animation: heartbeat 1s infinite;

        @media (min-width: 851px) {
          background: $main;
        }

        .logo-main-word {
          fill: $main;

          @media (min-width: 851px) {
            fill: $white;
          }
        }
      }
    }

    &:before,
    &:after {
      content: none;
      height: 0;
    }
  }
}

.logo {
  svg {
    width: 60px;
    fill: #c8c8c8;
    stroke-miterlimit: 10;
    transition: 0.5s ease-in-out;
    border-radius: 15px 0 15px 0;
  }
}

@keyframes heartbeat {
  0% {
    transform: scale(0.95);
  }
  20% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.95);
  }
  60% {
    transform: scale(1);
  }
  80% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(0.95);
  }
}