@media (min-width: 600px) {
  .bar-icon {
    display: none;
  }

  .links {
    display: block;
  }

  header {
    width: 100%;
  }

  .primary-nav {
    position: inherit;
  }
  /* MAIN */
  /* hero section */
  .hero-post {
    display: grid;
    grid-template-columns: 1.25em minmax(auto, 800px) auto 1.25em;
    max-width: 100rem;
  }

  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    max-width: 100rem;
    gap: 1rem;
    margin: 0 auto;
  }
}