_patterns_logo-section.scss

@mixin vf-p-logo-section {
  // deprecated, to be removed in future version
  .p-logo-section__title {
    @extend %small-caps-text;
  }

  $logo-section-item-size: 6.5rem; // height of the logos on large screens
  $logo-section-item-size-small: 4rem; // height of the logos on small screens

  $logo-section-offset: 1rem; // offset by which rows are pulled closer together
  $logo-section-offset-small: 0.5rem; // height of the logos on small screens

  $logo-section-item-gap: 2rem;

  // TODO: Remove .p-logo-section--dense since it's been deprecated in favor
  // of just using .p-logo-section instead
  .p-logo-section,
  .p-logo-section--dense {
    .p-logo-section__item {
      display: inline-block;
      margin: 0;
      margin-bottom: calc(-1 * $logo-section-offset-small); // pull the next row of logos up
      margin-right: $logo-section-item-gap;
      margin-top: calc(-1 * $logo-section-offset-small); // pull the previous row of logos down

      @media (min-width: $breakpoint-small) {
        margin-bottom: calc(-1 * $logo-section-offset);
        margin-top: calc(-1 * $logo-section-offset);
      }
    }

    .p-logo-section__logo {
      display: block;
      height: $logo-section-item-size-small;
      max-width: none; // prevent logos from squishing on small screens
      width: auto;

      @media (min-width: $breakpoint-small) {
        height: $logo-section-item-size;
      }
    }

    .p-logo-section__items {
      line-height: 0; // prevent space between rows of inline logos

      // compensate for the negative margin on the logos
      padding-bottom: $logo-section-offset-small;
      padding-top: $logo-section-offset-small;

      @media (min-width: $breakpoint-small) {
        padding-bottom: $logo-section-offset;
        padding-top: $logo-section-offset;
      }
    }
  }

  // fallback for old logo sections that may have logos not properly aligned by design team
  .p-logo-section.has-misaligned-images,
  .p-logo-section--dense.has-misaligned-images {
    .p-logo-section__item {
      margin-bottom: $spv--small;
      margin-top: 0;

      width: $logo-section-item-size-small;

      @media (min-width: $breakpoint-small) {
        width: $logo-section-item-size;
      }
    }

    .p-logo-section__items {
      align-items: center;
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 0;
      padding-top: 0;
    }

    .p-logo-section__logo {
      height: auto;
      width: 100%;
    }
  }
}