.button {
  --bg: #000;
  --hover-bg: #b08de8;
  --hover-text: #000;
  color: #fff;
  cursor: pointer;
  border: 1px solid #d2d2d2;
  border-radius: 12px;
  padding: 0.8em 2em;
  background: var(--bg);
  transition: 0.2s;
}

.button:hover {
  color: var(--hover-text);
  transform: translate(-0.25rem, -0.25rem);
  background: var(--hover-bg);
  box-shadow: 0.25rem 0.25rem #fff;
}

.button:active {
  transform: translate(0);
  box-shadow: none;
}

.icon-yt {
  font-size: 25px;
}

@media (max-width: 768px) {
  .button {
    font-size: 3vw;
    padding: 0.5rem 1rem;
    gap: 0.3rem;
  }
  .button__icon-wrapper {
    width: 20px;
    height: 20px;
  }
}