/* stylelint-disable declaration-colon-space-after */
// Responsible for the fun and fancy pop o' grey
// On small screens, the background goes full width, put is
// 24px shy of the top & bottom.
// The second linear-gradient inserts the white bar at the bottom.
// 60px =  24px + the margin of the last logo + padding of the section

.company-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid color('neutral-4');
  background: color('primary-2');

  &:hover {
    transform: scale(1.03);
  }
}

.image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: rem-calc(120px);
  max-height: rem-calc(36px);
}

.small {
  height: rem-calc(185px);
  padding: rem-calc(36px) rem-calc(18px);

  .image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: rem-calc(12px);
    max-width: rem-calc(120px);
    max-height: rem-calc(36px);
  }

  .star-rating {
    margin-bottom: rem-calc(18px);
  }
}

.large {
  height: rem-calc(270px);
  padding: rem-calc(60px) rem-calc(36px);

  .image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: rem-calc(18px);
    max-width: rem-calc(120px);
    max-height: rem-calc(60px);
  }

  .star-rating {
    margin-bottom: rem-calc(24px);
  }
}

@media #{$mobile-only} {
  .company-card {
    margin-bottom: rem-calc(24px);
  }

  .large {
    height: rem-calc(185px);
  }
}

@media #{$tablet-only} {
  .small {
    height: rem-calc(135px);
  }
}

@media #{$IE} {
  .small,
  .large {
    height: auto;
  }
}