/*
* strip-unit - Unit stripper [10px = 10]
* param - $num : the value with a unit suffix, E.g: 10px
* return - $result : the value without any suffix, E.g: 10
* E.g. strip-unit(100px) = 100
*/
/*
* pxToEM - Convert PX value to EM value [100px = 6.25em]
* param - $target : the value in px without 'px' suffix, E.g: 100
* return - $result : the value in em with 'em' suffix, E.g: 6.25em
* E.g. pxToEM(100) = 6.25em
*/
/*
* u - PX and REM constrictor
* param - $property : css property, E.g: padding
* param - $values... : list of values for the property, note values are multiplied by $pixelBase, E.g.: 10, 20, 30, 40
* return - $result : the css property with values applied in pixels
* E.g. @include u(padding, 10, 20, 30, 40) = padding: 100px, 200px, 300px, 400px;
*/
/*! _featured-product */
.featured-products__container,
.related-products__container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem; }
  @media (max-width: 992px) {
    .featured-products__container,
    .related-products__container {
      grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 576px) {
    .featured-products__container,
    .related-products__container {
      grid-template-columns: 1fr; } }
  .featured-products__container .featured-product__image,
  .related-products__container .featured-product__image {
    height: 60px; }
    .featured-products__container .featured-product__image img,
    .related-products__container .featured-product__image img {
      height: 100%;
      width: 100%; }
  .featured-products__container .featured-product .more-btn,
  .related-products__container .featured-product .more-btn {
    font-family: "brandon-grotesque", Helvetica, sans-serif;
    padding: 15px 20px;
    padding: 8px 13px;
    display: inline-block;
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: 600;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    transition: 0.4s;
    border: 0;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    background: #22357e;
    color: #fff;
    width: 100%;
    text-align: center;
    font-size: 15px;
    line-height: 1; }
    .featured-products__container .featured-product .more-btn:hover,
    .related-products__container .featured-product .more-btn:hover {
      background: #9fabd4;
      color: #000; }