.social {
  position: fixed;
  display: flex;
  flex-direction: column;
  bottom: 50%;
  transform: translateY(50%);
  left: 0;
  padding: 0;
  margin: 0;
  z-index: 1000;
}

.social-item {
  width: 40px;
  height: 40px;
}

.social-item:hover {
  opacity: 0.9;
  width: 42px;
}

.social-item img {
  width: 100%;
  cursor: pointer;
}

.social-item a {
  padding: 0;
  margin: 0;
  text-decoration: none;
  display: block;
}

@media screen and (max-width: 50em) {
  .social {
    bottom: 0;
    left: 0;
    transform: translateX(0%);
  }
  .social-item {
    width: 30px;
    height: 30px;
  }
  .social-item:hover {
    width: 32px;
    height: 32px;
  }
}