.promo {
  background-color: var(--addgene-neutral-green);

  @media (min-width: 768px) {
    min-height: 230px;
  }

  .promo-content {
    @media (min-width: 768px) {
      padding-right: clamp(10rem, 42%, 22rem);
      background-repeat: no-repeat;
      background-position: right center;
      background-size: auto 100%;

      h2 {
        width: 50%
      }

      &.bg-join-community,
      &.bg-browse-catalog {
        background-image: url(../assets/images/promo-aav-antibody.svg);
      }

      &.bg-browse-aav {
        background-image: url(../assets/images/promo-browse-aav.svg);
      }

      &.bg-browse-antibody {
        background-image: url(../assets/images/promo-browse-antibody.svg);
      }
    }
  }
}