@media screen {
  .header {
    width: 100%;
    padding: var(--space-8) 0;
  }

  body {
    padding: 0 var(--space-4);
  }
}

@media screen and (min-width: 600px) {
  .header {
    padding: var(--space-8) 0;
  }
  body {
    padding: 0 var(--space-8);
  }
}

@media screen and (min-width: 768px) {
  .header {
    padding: var(--space-8) 0;
  }
  body {
    padding: 0 var(--space-12);
  }
}

@media screen and (min-width: 1200px) {
  .header {
    padding: var(--space-8) 0;
  }
  body {
    padding: 0 var(--space-16);
  }
}