<div class="card">
  <h1>Spacing</h1>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nostrum eos odio itaque, voluptate laudantium dicta id fugit quibusdam eius, quidem voluptatem, quis pariatur! Libero, voluptate. Ipsam error, temporibus officiis nulla est sunt exercitationem quis laboriosam iusto illo id ullam et ipsa porro alias! Nesciunt perspiciatis laudantium consectetur praesentium in deleniti vero voluptates quis dicta architecto commodi asperiores reiciendis quasi accusantium sint officiis cum error ad, aut inventore amet rerum. Ducimus error dolor quae, accusantium laborum enim? Molestias dolor quisquam ipsum porro iure, aliquam repellendus dicta dignissimos corporis doloremque! Maiores veniam sit odit totam repellat illo temporibus expedita sapiente quisquam repellendus aliquam blanditiis asperiores dolorem facilis, dignissimos libero aspernatur laborum similique! Nisi dignissimos cupiditate itaque ipsa, laboriosam enim eaque accusantium esse accusamus veniam quaerat repudiandae optio veritatis eveniet impedit iusto error. Iusto ab officiis repellendus deserunt eos perferendis! Adipisci velit iste obcaecati qui magnam eius perspiciatis ipsam natus accusantium nostrum reprehenderit, atque quos impedit, perferendis quisquam? Modi ad dolore doloremque possimus nihil? Tempore fugiat omnis nisi nam optio incidunt ab ipsam veritatis, aspernatur vel eos voluptatum? Quia, praesentium non. Nesciunt fuga aliquam iusto minima eaque quidem quia delectus pariatur incidunt impedit fugit, nam dolor, quasi facere sint similique enim eos voluptatem ea quod ullam tempora unde? Ipsum quas error similique porro adipisci officia explicabo sint optio nemo beatae ex perspiciatis, atque assumenda!</p>
</div>

:root {
  --body-bg: #567;
  --card-bg: #efefef;
  --padding: 16px;
  --margin: 32px;
  --font-size: 14px;

  @media screen and (min-width: 768px) {
    --padding: 32px;
    --margin: 64px;
    --font-size: 16px;
  }

  @media screen and (min-width: 1024px) {
    --padding: 64px;
    --margin: 128px;
    --font-size: 18px;
  }
}

body {
  background: var(--body-bg);
  padding: var(--padding);
}

h1 {
  line-height: 1;
  margin: 0;
  padding: 0;
}

.card {
  background: var(--card-bg);
  color: var(--body-bg);
  font-size: var(--font-size);
  line-height: 1.5;
  padding: var(--padding);
  transition: padding 0.1s ease-in-out;
}