@mixin image-container() { ... }@mixin image-container() { 
  position: relative;
  display: block;
  width: 100%;

  // At the moment, the product card can only handle square images and as
  // the cards width goes up and down, the image height scales accordingly to maintain
  // the 1:1 square ratio. In the case that wider product cards want to be explored
  // but image height maxed out then adjust max-width;
  max-width: var(--kib-product-image-max-width, #{settings.$max-width});

  &::after {
    display: block;
    padding-top: 100%;
    content: '';
  }
 }

@mixin image() { ... }@mixin image() { 
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: translate(-50%, -50%);
 }

$max-width: unit.rem(248px) !default;