@media (min-width: 768px) {

            .header-content {

                flex-direction: row;

                justify-content: space-between;

            }

            

            .logo {

                margin-bottom: 0;

            }

            

            nav {

                width: auto;

            }

            

            .benefits-container {

                grid-template-columns: 1fr 1fr;

            }

            

            .ingredients-container {

                grid-template-columns: 1fr 1fr;

            }

            

            .hero h1 {

                font-size: 2.5rem;

            }

        }

        

        @media (min-width: 992px) {

            .benefits-container {

                grid-template-columns: 1fr 1fr 1fr;

            }

            

            .ingredients-container {

                grid-template-columns: 1fr 1fr 1fr;

            }

        }