socials Card made with CSS

.socials-container {
  width: fit-content;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  padding: 20px 40px;
  background-color: #333333;
}
.social {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgb(194, 194, 194);
}
.twitter:hover {
  background: linear-gradient(45deg, #66757f, #00acee, #36daff, #dbedff);
}
.facebook:hover {
  background: linear-gradient(45deg, #134ac0, #316ff6, #78a3ff);
}
.google-plus:hover {
  background: linear-gradient(45deg, #872419, #db4a39, #ff7061);
}
.instagram:hover {
  background: #f09433;
  background: -moz-linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
  background: -webkit-linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
  background: linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
}
.social svg {
  fill: white;
  height: 20px;
}