.product_wrapper{
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.product_wrapper .pw-desc .pd-title{
  font-family: "Antonio", 'Myriad Pro', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--bs-primary);
  transition: color .25s;
}
.product_wrapper:hover .pw-desc .pd-title{ color: var(--bs-accent); }
.page-section.product-category-section{
  padding: 0;
  position: relative;
}
.page-section.product-category-section::before{
  content: "";
  display: block;
  width: 34vw;
  position: absolute;
  top: 0;
  height: 100%;
  background-image: url(../../img/benefit-bg-1.png);
  background-repeat: no-repeat space;
  background-size: 150%;
  z-index: -1;
}
.page-section.product-category-section > .container{
  padding-block: 3rem;
}
.page-section.product-category-section + .page-section.product-category-section > .container{
  border-top: 4px dashed white;
}
.product-category-card{
  text-align: center;
  position: sticky;
  aspect-ratio: 5 / 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  top: 108px;
}
.product-category-card::before{
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 5 / 2;
  background-image: url(../../img/product-type-bg.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom center;
}
.product-category-card.bc-reverse{
  background-image: url(../../img/product-type-bg-reverse.svg);
}
.product-category-card .product-category-content{
  padding: .5rem 1rem 1.5rem;
  color: var(--bs-primary);
  font-weight: normal;
  /* transform: perspective(1000px) rotateY(28deg) rotateX(12deg); */
}
.product-category-card .product-category-content .pc-title{
  font-weight: normal;
  font-size: 1.5rem;
  margin-bottom: 0;
  transition: color .3s;
}
.product-category-card:hover .product-category-content .pc-title{
  color: var(--hilo-pink);
}
.product-category-card .product-category-icon{ transition: transform .3s; }
.product-category-card:hover .product-category-icon{
  transform: scale(1.125);
}
.product-category-card.bc-reverse .product-category-content{
  /* transform: perspective(1000px) rotateY(-28deg) rotateX(-12deg); */
}
.product_wrapper .pw-thumbnail{
  transition: transform .125s;
}
.product_wrapper:hover .pw-thumbnail{
  transform: scale(1.05);
  animation: headShake 0.925s forwards;
}
@media screen and (min-width: 768px) {
  .product_wrapper .pw-thumbnail{
    padding: 0.5rem;
  }
  #content{ overflow: visible; }
}