/* ---------------------------------------
   Blog Post Products — Front-end Layout
   --------------------------------------- */


/* Hover Effect */

.bp-product-item a img {
  transition: filter 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 0.5em;
}

.bp-product-item a:hover img {
  filter: brightness(1.15);
}


/* Hover Effect END */

.bp-interest-section {
  margin-top: 2em;
}

/* grid container: 3 columns on desktop */
.bp-interest-section .bp-products-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5em; /* space between items */
  padding: 0;
  list-style: none;
  margin: 0;
}

/* ensure each item’s link/image/title fill their cell */
.bp-interest-section .bp-product-item a {
  display: block;
  text-align: center;
}

/* 1 column on mobile */
@media (max-width: 768px) {
  .bp-interest-section .bp-products-list {
    grid-template-columns: 1fr;
  }
  
  /* shrink product images to 75% only on mobile */
  .bp-interest-section .bp-products-list .bp-product-item a img {
    width: 75%;
    height: auto;
    display: block;
    margin: 0 auto; /* centers it under the title */
  }
  
}

/* on all viewports */
.bp-interest-section .bp-product-item .bp-title {
  display: block;     /* make the title its own block, underneath the img */
  margin-top: 0.5em;  /* space it down a bit */
  text-align: center; /* center it under the image */
}