.social {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-2) 0;
}

.social-img-left {
  right: 1em;
}

.social-img-right {
  left: 1em;
}

.social-img {
  position: relative;
  bottom: 1em;
  border-radius: var(--radius);
  display: inline-block;
}

@media screen and (width >= 980px) {
  .social-img {
    height: 128px;
    width: 128px;
  }
}

@media screen and (width <= 980px) {
  .social-img {
    height: 96px;
    width: 96px;
  }
}

.grow {
  transition: all 0.2s ease-in-out;
  transform-origin: center bottom;
}

.grow:hover {
  transform: scale(1.05);
}