.main {
  position: relative;
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
  max-width: calc(1024px + var(--gap) * 2);
  margin: auto;
  padding var(--gap)

}
.productList {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  grid-auto-rows: 400px;
  grid-gap: 30px 10px;
  margin-top: 10px;
}
.product {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--entry);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  padding: var(--gap);
}
img{
  margin-left: auto;
  margin-right: auto;
}
.prodImage {
  display:block;
  width: 100%;
  height: auto;
  max-height: 100%;
  border-radius: var(--radius);
  overflow-clip-margin: content-box;
  overflow: clip;
  padding-bottom: 10px
}
.prodStock {
  color: var(--green);
}
.shop-nav {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: calc(var(--nav-width) + var(--gap) * 2);
  margin-inline-start: auto;
  margin-inline-end: auto;
}
.shop-nav li {
  padding-right:10px;
  font-size: 16px;
}

@media only screen and (min-width: 608px) {
  .productList {
    grid-template-columns: auto auto auto;
  }
}

@media only screen and (min-width: 609px) {
  .productList {
    grid-template-columns: auto auto auto auto;
  }
  .shop-nav {
    justify-content: flex-end
  }
}

@media only screen and (min-width: 992px) {
  .productList {
    grid-template-columns: auto auto auto auto auto;
  }
}