@import "tailwindcss/theme";
@import "../variables/theme.css";

.partnerLanding {
  @apply flex w-full flex-col items-center justify-center;

  gap: var(--spacing-32);
  max-height: 715px;
  aspect-ratio: 360/715;
  background: var(--color-black) url("../../images/bg-partnerLanding-sm.png")
    center 0 / auto 100% no-repeat;

  @variant md {
    & {
      aspect-ratio: 600/715;
      background-position: center 30%;
      background-size: 100%;
    }
  }

  @variant lg {
    & {
      gap: var(--spacing-24);
      max-height: 720px;
      aspect-ratio: 1280/720;
      background-image: url("../../images/bg-partnerLanding-lg.png");
      background-position: center;
    }
  }
}

.partnerLanding-logo {
  --logo-width: 240px;

  @variant md {
    & {
      --logo-width: 250px;
    }
  }

  @variant lg {
    & {
      --logo-width: 386px;
    }
  }
}

.partnerLanding-information {
  @apply flex flex-col;

  gap: var(--spacing-48);
  max-width: 328px;

  @variant lg {
    & {
      @apply flex-row justify-center;

      gap: var(--spacing-20);
      width: 692px;
      max-width: none;
      height: 120px;
    }
  }
}

.partnerLanding-feature {
  @apply relative text-center text-white;

  @variant lg {
    & {
      @apply flex-1/2 content-center;
    }
  }

  + *::before {
    @apply absolute bg-white;

    top: calc(var(--spacing-24) * -1);
    left: 50%;
    width: 40px;
    height: 1px;
    content: "";
    transform: translateX(-50%);

    @variant lg {
      & {
        top: 0;
        left: -10px;
        width: 1px;
        height: 100%;
        transform: none;
      }
    }
  }

  > * + * {
    margin-top: var(--spacing-8);
  }
}