.icon {
  display: block;
  height: 24px;
  width: 24px;
  background-position: center;
  background-size: cover;
  transition: transform var(--effect-duration);
}

@media (min-width: 576px) {
  .icon {
    height: 32px;
    width: 32px;
  }
}

@media (min-width: 1024px) {
  .icon {
    transition: transform var(--effect-duration);
  }
  .icon:hover {
    transform: scale(1.2);
  }
}

.icon--phone {
  background-image: url(../icons/tel-white.svg);
}

.icon--menu {
  background-image: url(../icons/icon-burger-menu.svg);
}

.icon--menu:hover {
  background-image: url(../icons/icon-burger-menu-hover.svg);
}

.icon--close {
  background-image: url(../icons/icon-close.svg);
}

@media (min-width: 1024px) {
  .icon--menu {
    display: none;
  }
}