@import "mixins";
@import "variables";
@import "branding";

.product-img {
  padding: 5px;
  margin-bottom: 10px;
  outline: 1px solid #ccc;

  @include box-shadow(0 1px 2px 1px rgba(0, 0, 0, 0.15));

  // placeholder for when no product images
  &.placeholder {
    opacity: 0.35;

    @media all and (max-width: 1024px) {
      display: none;
    }
  }
}

.hero-img {
  outline: 1px solid $disabled-bright;
  border-color: transparent;

  @include box-shadow(none);

  width: 100%;
  min-height: 80px;
  height: inherit;
  max-height: 260px;
  overflow: hidden;

  @media all and (max-width: 640px) {
    min-height: 68px;
  }
}

.hero-img-small {
  background-color: #333;
  width: 100%;

  // min-height: 60px
  height: inherit;
  overflow: hidden;
  margin: 0 0 1rem 0 !important;
}

.producer-logo {
  max-width: 220px;
}

@media only screen and (max-width: 1024px) {
  .product-img {
    margin-top: 2em;
    margin-bottom: 1em;
  }
}
