:root {
  --svg-size: 3rem;
  --container-size: calc(var(--svg-size) + 1.5rem);
}

.container {
  width: var(--container-size);
  height: var(--container-size);
  padding: .6rem;
  background-color: var(--music-color);
  border-radius: 1rem;
  transition: background-color 0.2s ease-out, filter 0.2s ease-out, width 0.2s ease-out;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container:hover {
  filter: brightness(1.3);
  width: calc(var(--container-size) + 0.8rem);
}


.container svg {
  padding: 0;
  margin: 0;
  width: var(--svg-size);
  height: var(--svg-size);
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  fill: var(--music-color-detail);
  transition: fill 0.2s ease-out;
}