@media all and (min-width: 320px) {
  /*---------------------- header ----------------------*/
  header .logo p,
  header .profile .btn span:nth-child(2),
  header .profile .bell,
  header .profile .gear {
    display: none;
  }
  /*---------------------- main ----------------------*/
  /* contactsArea */
  .contactsArea .container {
    flex-direction: column;
    padding: 0;
  }
  .contactsArea .favorites-emergency,
  .contactsArea .contacts-search {
    width: 100%;
  }
  .contactsArea .favoritesList .body .contact,
  .contactsArea .emergencyList .body .contact {
    grid-column: span 12;
  }
  /* add contact */
  .add-contact .container {
    height: 600px;
    overflow: auto;
    scrollbar-width: none;
  }
  .add-contact div[class="d-flex gap-3"] {
    flex-direction: column-reverse;
  }
  .add-contact .btn-save,
  .add-contact .btn-cancel,
  .add-contact .update {
    width: 100%;
  }
}
@media all and (min-width: 420px) {
  /*---------------------- main ----------------------*/
  /* add contact */
  .add-contact div[class="d-flex gap-3"] {
    flex-direction: row;
  }
  .add-contact .btn-save,
  .add-contact .btn-cancel,
  .add-contact .update {
    width: 50%;
  }
}
@media all and (min-width: 642px) {
  /*---------------------- header ----------------------*/
  header .profile .btn span:nth-child(3) {
    display: none;
  }
  header .logo p,
  header .profile .btn span:nth-child(2),
  header .profile .bell,
  header .profile .gear {
    display: block;
  }
}
@media all and (min-width: 768px) {
  /*---------------------- main ----------------------*/
  /* contactsArea */
  .contactsArea .favoritesList .body .contact,
  .contactsArea .emergencyList .body .contact {
    grid-column: span 6;
  }
  /* add contact */
  .add-contact .container {
    max-width: 500px;
  }
}
@media all and (min-width: 1280px) {
  /*---------------------- main ----------------------*/
  /* contactsArea */
  .contactsArea .container {
    flex-direction: row;
  }
  .contactsArea .contacts-search {
    width: 70%;
  }
  .contactsArea .favorites-emergency {
    width: 30%;
  }
  .contactsArea .favoritesList .body .contact,
  .contactsArea .emergencyList .body .contact {
    grid-column: span 12;
  }
}