@import "../components/partnerLanding.css";
@import "../components/heroContent.css";
@import "../components/partnerCard.css";
@import "../components/partnerVoice.css";
@import "../patterns/carousel.css";

.partnerSection {
  @apply grid;

  gap: var(--spacing-32);
  padding-bottom: var(--spacing-sm-margin-section);
  border-bottom: 1px solid #898989;

  @variant md {
    padding-bottom: var(--spacing-md-margin-section);
  }

  @variant lg {
    @apply flex items-start;

    gap: var(--spacing-40);
    padding-bottom: var(--spacing-lg-margin-section);
  }
}

.partnerSection-heading {
  @variant lg {
    @apply sticky;

    top: calc(var(--spacing-lg-margin-section) + var(--spacing-64));
    flex: 1 1 590px;
    transition: top 0.3s ease-in-out;
  }
}

&:has(.pageSectionNavigation--slideUp) .partnerSection-heading {
  top: var(--spacing-lg-margin-section);
}

.partnerSection-list {
  @apply grid;

  gap: var(--spacing-40);

  @variant lg {
    flex: 1 1 570px;
  }
}