/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
  
@media only screen and (max-width: 1200px) {
    .container {
      max-width: 960px;
    }
  }

/* Medium Devices, Desktops */

@media only screen and (max-width: 992px) {
  header .top-nav {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  header .top-nav .logo {
    margin: auto;
  }

  header .top-nav ul {
    margin: 20px auto 0;
    width: 80%;
  }

  header .hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  header .hero .hero-image {
    padding-left: 0;
    margin-top: 40px;
  }

  .featured-section {
    padding: 50px 0;
  }

  .featured-section .products {
    grid-template-columns: 1fr;
  }

  .blog-section .blog-posts {
    grid-template-columns: 1fr;
    text-align: center;
    grid-template-areas: "blog1" "blog2" "blog3";
  }

  footer .footer-content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  footer .footer-content .made-with {
    margin: auto;
  }

  footer .footer-content ul {
    margin: 20px auto;
    width: 60%;
  }
}

/* Small Devices, Tablets */

/* Extra Small Devices, Phones */

/* Custom, iPhone Retina */