body {
  background-color: var(--color-gray-200);
}

header {
  margin-bottom: var(--spacing-12);
}

.container {
  position: relative;
  top: var(--spacing-8);
  margin: 0 var(--spacing-24) var(--spacing-24) 20rem;
  background-color: var(--color-gray-100);
  padding-bottom: var(--spacing-8);
  box-shadow: var(--shadow-lg);
  z-index: 2000;
}

.nav-container {
  position: fixed;
  top: var(--spacing-24);
  left: var(--spacing-16);
  z-index: 3000;
}

.header-content {
  padding: 0 var(--spacing-20);
}

#news {
  padding: 0 var(--spacing-20);
}

main section#news ~ #latest-news {
  display: none;
}

.news-container {
  position: relative;
  margin: 0 var(--spacing-24) 20rem 20rem;
  background-color: var(--color-gray-100);
  padding: var(--container-padding);
  box-shadow: var(--shadow-lg);
  z-index: 2000;
}

.article-container {
  margin-bottom: var(--spacing-24);
}

.block {
  margin-bottom: var(--spacing-4);
}

section {
  margin-bottom: var(--spacing-4);
}

.bg-img {
  position: fixed;
  left: 3rem;
  bottom: 1rem;
  width: 40%;
  fill: var(--color-gray-300);
}

footer {
  position: relative;
  margin: 0 var(--spacing-24) 0 20rem;
  padding: var(--spacing-8) 0;
}

footer p {
  font-size: var(--text-sm);
}

/*
  Tablet
  ========================================================================== */
/* @media screen and (max-width: 95em) {
  .container,
  .news-container,
  footer {
    margin: 0 var(--spacing-4) var(--spacing-24) 10rem;
  }

  .nav-container {
    left: var(--spacing-8);
  }

  .header-content {
    padding: 0 var(--spacing-12);
  }

  #news {
    padding: 0 var(--spacing-12);
  }
} */

/*
  Mobile
  ========================================================================== */
@media screen and (max-width: 45rem) {
  .container,
  .news-container,
  footer {
    margin: var(--spacing-10) var(--spacing-4) 0 var(--spacing-4);
  }

  .container {
    padding-bottom: 0;
  }

  .nav-container {
    top: var(--spacing-4);
    left: var(--spacing-4);
  }

  .news-container {
    padding: var(--container-padding-mobile);
  }

  header {
    margin-bottom: 1rem;
  }

  .header-content {
    padding: var(--spacing-2) var(--spacing-6);
  }

  #news {
    padding: 0 var(--spacing-6);
  }

  .claim {
    margin-top: var(--spacing-2);
    padding-left: var(--spacing-6);
  }

  footer {
    margin: 0 2rem 0 2rem;
    padding: var(--spacing-8) 2rem 0 2rem;
  }
}