html body header, html body #main-wrapper {
  max-width: 1360px;
}
html body header nav {
  background-color: rgba(255, 255, 255, 0.9) !important;
}

#main-wrapper {
  display: flex;
  flex-direction: column;
}
#main-wrapper .hero-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}
#main-wrapper .hero-wrapper .hero {
  aspect-ratio: 21/9;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 4px;
  width: 100%;
}
@media (max-width: 480px) {
  #main-wrapper .hero-wrapper .hero {
    min-height: 250px;
  }
}
#main-wrapper .hero-wrapper .description-wrapper {
  flex: 1;
  /*max-width: 90rem;*/
  margin: 0 auto;
  padding: 7rem 0;
  text-align: center;
}
@media (max-width: 320px) {
  #main-wrapper .hero-wrapper .description-wrapper .description-header {
    font-size: 31.25px;
  }
}
@media (min-width: 321px) and (max-width: 2559px) {
  #main-wrapper .hero-wrapper .description-wrapper .description-header {
    font-size: calc(31.25px + 38.75 * ((100vw - 320px) / 2240));
  }
}
@media (min-width: 2560px) {
  #main-wrapper .hero-wrapper .description-wrapper .description-header {
    font-size: 70px;
  }
}
#main-wrapper .hero-wrapper .description-wrapper .description-content {
  margin: 2rem auto 0 auto;
  width: calc((25% - 0.75rem) * 2);
  word-break: break-word;
}
@media (max-width: 320px) {
  #main-wrapper .hero-wrapper .description-wrapper .description-content {
    font-size: 17.5px;
  }
}
@media (min-width: 321px) and (max-width: 2559px) {
  #main-wrapper .hero-wrapper .description-wrapper .description-content {
    font-size: calc(17.5px + 2.5 * ((100vw - 320px) / 2240));
  }
}
@media (min-width: 2560px) {
  #main-wrapper .hero-wrapper .description-wrapper .description-content {
    font-size: 20px;
  }
}
@media (max-width: 768px) {
  #main-wrapper .hero-wrapper .description-wrapper .description-content {
    width: 90%;
  }
}
@media (max-width: 768px) {
  #main-wrapper .hero-wrapper .description-wrapper {
    max-width: 90vw;
  }
}
#main-wrapper .products-wrapper .products {
  display: grid;
  /*grid-template-columns: 25% 25% 25% 25%;*/
  grid-template-columns: repeat(4, calc(25% - 0.75em));
  /*grid-template-columns: repeat(5, calc(20% - 1em));*/
  grid-gap: 1em;
}
@media (max-width: 320px) {
  #main-wrapper .products-wrapper .products {
    font-size: 11.25px;
  }
}
@media (min-width: 321px) and (max-width: 2559px) {
  #main-wrapper .products-wrapper .products {
    font-size: calc(11.25px + -1.25 * ((100vw - 320px) / 2240));
  }
}
@media (min-width: 2560px) {
  #main-wrapper .products-wrapper .products {
    font-size: 10px;
  }
}
@media (max-width: 480px) {
  #main-wrapper .products-wrapper .products {
    grid-template-columns: 100%;
    /*font-size: 3rem;*/
  }
}
@media (min-width: 351px) and (max-width: 768px) {
  #main-wrapper .products-wrapper .products {
    grid-template-columns: repeat(2, calc(50% - 0.25em));
    /*grid-template-columns: 50% 50%;*/
  }
}
@media (min-width: 769px) and (max-width: 1500px) {
  #main-wrapper .products-wrapper .products {
    grid-template-columns: repeat(3, calc(33% - 0.5em));
    /*grid-template-columns: 33.33% 33.33% 33.33%;*/
  }
}
#main-wrapper .products-wrapper .products a {
  text-decoration: none;
  color: inherit;
  background: #FBF9F8;
}
@media (max-width: 320px) {
  #main-wrapper .products-wrapper .products a product-viewer {
    --h1-font-size: 11.25px;
  }
}
@media (min-width: 321px) and (max-width: 2559px) {
  #main-wrapper .products-wrapper .products a product-viewer {
    --h1-font-size: calc(11.25px + 10.75 * ((100vw - 320px) / 2240));
  }
}
@media (min-width: 2560px) {
  #main-wrapper .products-wrapper .products a product-viewer {
    --h1-font-size: 22px;
  }
}
#main-wrapper .products-wrapper .products > a, #main-wrapper .products-wrapper .products > div {
  border-radius: 4px;
}

footer, footer > div {
  background: #FBF9F8;
}