/*CONTAINERS*/

.main-container {
  background-image: url(../images/factory-04.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.column {
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
}

.wrap {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

/*HERO*/

.group-hero {
  min-height: 4rem;
  top: 8rem;
}

/*CONTENT*/

.bold-title {
  padding-bottom: 2rem;
}

.orange-back {
  background: linear-gradient(135deg, #fdb72c, #fc642a);
}

  @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
    .orange {
      background-color: rgba(253, 173, 53, .9);
      backdrop-filter: blur(20px);
       -webkit-backdrop-filter: blur(20px); } }

  @supports not ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
    .orange {
      background-color: rgba(253, 173, 53, .9);} }

.white {
  color: white;
}

@keyframes glow {
  from {
    filter: drop-shadow(-5px -5px 20px rgba(0, 0, 0, 0.7));
  }
  to {
    filter: drop-shadow(20px 20px 20px rgba(0, 0, 0, 0.5));
  }
}

.glow {
  animation: glow 5s infinite alternate;
}

/*CONTENT*/

.product-card {
  display: flex;
  flex-wrap: wrap;
  flex: 100%;
  height: auto;
  cursor: pointer;
  margin: 2rem 0rem;
  align-items: center;
  justify-content: space-around;
}

.image-container {
  display: flex;
  flex-direction: column;
  width: 34%;
  height: 30vh;
  justify-content: center;
}

.image-container img {
  height: 70%;
  width: auto;
  object-fit: contain;
}

.product-card sup {
  vertical-align: text-top;
  font-size: x-small;
}

/*FOOTER*/
/*
.footer-container a {
  color: white;
}

.gradient {
  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.8));
}

#mentions {
  color: white;
}

#mentions a {
  color: white;
}
*/

/*RESPONSIVE*/

@media screen and (max-width: 840px) {
  .product-card {
    padding: 1rem;
    height: auto;
  }

  .image-container {
    width: 100%;
  }
}