@media screen and (max-width: 1050px) {
  .footer {
    height: max-content;
  }
  .f-nav {
    grid-template-columns: repeat(3, 2fr);
    grid-template-rows: repeat(3, 1fr);
  }
  .menu-grid {
    gap: 2rem;
  }
  .why {
    row-gap: 1rem;
  }
}

@media screen and (max-width: 950px) {
  .header, .footer, .brownies, .menu-grid, .faq-container, .c-wrapper {
    padding: 0.5rem 2rem;
  }
  main:has(.date) {
    padding: 1rem 2rem;
  }
  .hero .heading {
    font-size: 4rem;
  }
  .f-nav {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }
  .b-img {
    width: 150px;
  }
  .m-img {
    height: 200px;
    width: 200px;
  }
}

@media screen and (max-width: 768px) {
  .nav-logo {
    width: 7rem;
  }
  .nav-link, .nav-cta {
    font-size: 1rem;
    text-wrap: nowrap;
  }
  .nav-link {
    display: none;
    flex-direction: column;
  }
  .error-hero h1 {
    font-size: 10rem;
  }
  .error-hero p {
    font-size: 1.2rem !important;
  }
  .menu-grid {
    gap: 1rem;
  }
  .m-img {
    height: 200px;
    width: 200px;
  }
  .point {
    height: 200px;
    width: 300px;
  }
  .brownies {
    column-gap: 1rem;
  }
	.cart {
		right: 0.5rem;
		left: 0.5rem;
		width: auto;
	}
	.cart-icon {
		right: 0.5rem;
	}
}

@media screen and (max-width: 450px) {
  .nav-logo {
    width:5rem;
  }
  .f-wrapper {
    flex-direction: column;
    align-items: start;
    gap: 5rem;
  }
  .f-nav {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }
  .hero .heading {
    font-size: 2rem;
    column-gap: 1rem;
  }
  .hero .tagline {
    font-size: 1rem;
  }
  .hero .btns {
    gap: 3rem;
  }
  .hero .btns .cta {
    padding: 0.3rem 2rem;
    font-size: 1rem;
    text-wrap: nowrap;
  }
  .why {
    height: max-content;
    padding: 2rem;
  }
  .why-grid {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(1, 1fr);
  }
  .point {
    height: 150px;
    width: 250px;
    justify-self: center;
  }
  .brownies {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    padding: 2rem;
  }
  .brownie:nth-child(odd) {
    margin-top: 1rem;
  }
  .b-heading {
    font-size: 1.2rem;
  }

  .b-tagline {
    font-size: 0.8rem;
  }
  .menu-grid {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }
  .m-img {
    height: 150px;
    width: 150px;
  }
  .contact {
    height: max-content;
    padding-top: 2rem;
  }
  .c-wrapper {
    flex-direction: column;
  }
  .c-form-wrapper {
    width: 100%;
  }
  .f-nav {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }
  .b-img {
    width: 150px;
  }
  .m-img {
    height: 200px;
    width: 200px;
  }
}