@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 1fr minmax(600px, 1fr) 1fr 1.25em;
  }

  .featured-post {
    grid-column: 3;
  }

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