@media screen and (max-width: 500px) {
  body {
    padding-left: 5px;
    padding-right: 5px;
  }

  main {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  #container-desserts {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  #container-your-cart {
    margin-top: 20px;
  }

  #desserts {
    grid-template-columns: repeat(auto-fit, 250px);
  }

  .add-cart {
    top: 145px;
  }

  footer {
    width: calc(100% + 10px);
    margin-left: -5px;
    flex-direction: column;
  }
}