@media (max-width: 359px) {
  #app {
    padding-right: 12px;
    padding-left: 12px;
  }

  .brand__bread {
    width: 76px;
    height: 62px;
  }

  .brand__title {
    font-size: 21px;
  }

  .brand__help {
    top: 6px;
    padding-right: 8px;
    padding-left: 8px;
    font-size: 11px;
  }

  .brand__help {
    left: -12px;
  }

  .brand__library {
    top: 6px;
    right: -12px;
    padding-right: 8px;
    padding-left: 8px;
    font-size: 11px;
  }

  .category-grid {
    gap: 8px 5px;
  }

  .category-button__icon {
    border-radius: 12px;
  }

  .ingredient-head,
  .ingredient-row {
    grid-template-columns: minmax(0, 1fr) 67px 61px;
    gap: 5px;
  }

  .card {
    padding: 14px 12px;
  }

  .split-row {
    grid-template-columns: 68px repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 640px) {
  body {
    padding: 24px 0;
  }

  #app {
    border: 1px solid rgba(232, 221, 212, 0.8);
    border-radius: 28px;
    box-shadow: 0 24px 70px rgba(83, 61, 43, 0.08);
  }
}