.title {
    text-align: center;
    font-size: 50px;
    font-family; 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-image: url(productImage/titleBeige.svg);
  background-size: cover;
  background-position: center;
  text-align: center;
  color: #000000;
  padding: 50px 0;
}

.midnav {
    background-color: #FFCC00;
}
.results {
    background-color: #FFCC00;
}




.u-item {
    justify-items: center;
    border: 3px solid #000000;
    border-radius: 5px;
}
.item-img {
    align-items: center;
}

.img-title {
    padding: 15px;
    text-align: center;
    font-family: Copperplate, "Copperplate Gothic Light", fantasy; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 26.4px; } h3 { font-family: Copperplate, "Copperplate Gothic Light", fantasy; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 15.4px; } p { font-family: Copperplate, "Copperplate Gothic Light", fantasy; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 20px; } blockquote { font-family: Copperplate, "Copperplate Gothic Light", fantasy; font-size: 21px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 30px; } pre { font-family: Copperplate, "Copperplate Gothic Light", fantasy; font-size: 13px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 18.5714px; 
}

.body {
  display: grid;
  grid-template-columns: 100% auto;
}

#container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 20px;
  justify-items: center;
}

.item-container {
  display: flex;
  flex-direction: column-reverse;
  justify-content: start;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
    background-color: #F5F5DC;
}


.text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.item-container h1 {
  font-family: Copperplate;
  margin: 0;
}

.item-container h2 {
  margin: 0;
}
@media (min-width: 280px) {
  #container {
    grid-template-columns: repeat(1, minmax(245px, 1fr));
  }
}
@media (min-width: 400px) {
  #container {
    grid-template-columns: repeat(2, minmax(245px, 1fr));
  }
}

@media (min-width: 640px) {
  #container {
    grid-template-columns: repeat(3, minmax(245px, 1fr));
  }
}

@media (min-width: 980px) {
  #container {
    grid-template-columns: repeat(4, minmax(300px, 1fr));
  }
}

.image-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}