style.css

:root {
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-96: 96px;
  --spacing-128: 128px;

  --font-size-sm: 1rem;
  --font-size-md: 1.25rem;
  --font-size-lg: 1.5rem;
  --font-size-xl: 2rem;

  --color-primary: hsl(160deg, 100%, 30%);
  --color-secondary-light: hsl(45deg, 100%, 50%);
  --color-secondary-dark: hsl(45deg, 100%, 40%);
  --color-black: hsl(0deg, 0%, 0%);
  --color-gray-darker: hsl(0deg, 0%, 10%);
  --color-gray-dark: hsl(0deg, 0%, 30%);
  --color-gray-medium: hsl(0deg, 0%, 40%);
  --color-gray-light: hsl(0deg, 0%, 60%);
  --color-white: hsl(0deg, 0%, 1000%);
}

* {
  box-sizing: border-box;
  font-family: 'Lato', sans-serif;
}

html,
body {
  margin: 0;
  padding: 0;
}

/* Add styles here! */

header {
  border-block-end: var(--spacing-8) solid var(--color-gray-light);
}

main {
  background-color: var(--color-gray-medium);
}

p {
  margin-block: var(--spacing-16);
  font-size: 20px;
  line-height: 30px;
  color: var(--color-black);
}

strong {
  color: var(--color-primary);
}

.max-width-wrapper {
  width: 100%;
  padding-block: var(--spacing-48);
}

.intro-chunk {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--spacing-24);
}

.intro-chunk p {
  max-width: 415px;
}

.title {
  margin-block: var(--spacing-48);
}

.indented-heading {
  max-width: fit-content;
  margin: calc(-1 * var(--spacing-16)) 0 var(--spacing-16) calc(-1 * var(--spacing-32));
  padding: var(--spacing-16) var(--spacing-32);
  background: var(--color-secondary-light);
  border-block-end: var(--spacing-8) solid var(--color-secondary-dark);
}

.card {
  max-width: 800px;
  margin-inline: auto;
  padding: var(--spacing-24) var(--spacing-24) var(--spacing-8);
  background-color: var(--color-white);
  border-block-end: var(--spacing-8) solid var(--color-gray-light);
}