html main .row .col .card img {
  padding: 10px;
}

html main .container div.position-absolute {
  top: 15%;
  left: 100px;
}

html main .card-img-overlay {
  top: 220px;
}

html main .card-img-overlay {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

html main .card:hover h6 {
  display: block;
}

html main .card-img-overlay>h6 {
  display: none;
}

html main h1[class="text-center"]~.row>.col-12>.row>.col-2 {
  display: flex;
  justify-content: center;
}

.col>.row>.col {
  display: flex;
  justify-content: center;
}

@media (max-width:600px) {
  div.container.text-center>.row {
    flex-direction: column;
  }

  html main .card-img-overlay {
    top: 0;
  }

  html main .card-img-overlay>* {
   font-size: small;
  }

  div.container.text-center>.row>* {
    width: 100%;
  }
}

@media screen and (min-width:414px) and (max-width:414px) {
  html main .products-container .row {
    width: 100%;
  }
}

@media screen and (min-width:820px) and (max-width:820px) {

  div.container.text-center>.row>* {
    width: 25%;
    vertical-align: middle;
  }

  .swiper.mySwiper.swiper-initialized.swiper-horizontal.swiper-ios.swiper-backface-hidden {
    width: 100%;
    height: 90%;
  }
}