Or, much shorter:

  .foo {
    padding: 1rem 0;
    @media (min-width: 500px) { padding-bottom: 1.5rem; }
    @media (min-width: 800px) { padding-bottom: 2rem; }
  }