.titleFont {
  font-size: 4.5rem;
  color: white;
}

.price {
  font-weight: bold;
  font-size: 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.menuBGImage {
  width: 100vw;
  height: 30vh;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.7)), to(rgba(0, 0, 0, 0.7))), url("../Images/Bagel4.jpg");
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../Images/Bagel4.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: inherit;
  color: white;
  text-align: center;
}

.maxCardHeight {
  height: 200px;
  -o-object-fit: contain;
     object-fit: contain;
}

@media screen and (min-width: 768px) {
  .menuBGImage {
    width: 100vw;
    height: 40vh;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.7)), to(rgba(0, 0, 0, 0.7))), url("../Images/Bagel4.jpg");
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../Images/Bagel4.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: inherit;
    color: white;
    text-align: center;
  }
  .titleFont {
    font-size: 5rem;
    color: white;
  }
}

@media screen and (min-width: 960px) {
  .menuBGImage {
    width: 100vw;
    height: 35vh;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.7)), to(rgba(0, 0, 0, 0.7))), url("../Images/Bagel4.jpg");
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../Images/Bagel4.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: inherit;
    color: white;
    text-align: center;
  }
}