/* Keep the portrait physically anchored to the bottom edge of the hero. */

.public-hero {
  overflow: hidden;
  padding-bottom: 0;
}

.public-hero-grid {
  align-items: stretch;
}

.public-hero-copy {
  align-self: center;
  padding-bottom: clamp(3.5rem, 6vw, 5.25rem);
}

.public-hero-aside.public-hero-portrait {
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  margin-bottom: 0;
}

.public-hero-portrait-inner {
  align-self: stretch;
  display: flex;
  height: 100%;
  min-height: clamp(31rem, 43vw, 38rem);
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 0;
}

.public-hero-portrait-image {
  display: block;
  width: auto;
  max-width: 100%;
  height: clamp(31rem, 43vw, 38rem);
  margin: auto auto 0;
  object-fit: contain;
  object-position: center bottom;
}

.public-hero-identity {
  bottom: clamp(5rem, 8vw, 7rem);
}

@media (max-width: 960px) {
  .public-hero-line {
    white-space: normal;
  }

  .public-hero-copy {
    padding-bottom: clamp(3rem, 5vw, 4rem);
  }

  .public-hero-portrait-inner {
    min-height: clamp(27rem, 45vw, 32rem);
  }

  .public-hero-portrait-image {
    height: clamp(27rem, 45vw, 32rem);
  }

  .public-hero-identity {
    bottom: 4.25rem;
  }
}

@media (max-width: 720px) {
  .public-hero {
    padding-top: clamp(2.75rem, 8vw, 4rem);
  }

  .public-hero-grid {
    gap: 1.75rem;
  }

  .public-hero-copy {
    align-self: auto;
    padding-bottom: 0;
  }

  .public-hero-aside.public-hero-portrait {
    width: 100%;
    min-height: 0;
    align-items: flex-end;
    justify-content: center;
  }

  .public-hero-portrait-inner {
    width: min(100%, 27rem);
    height: auto;
    min-height: 0;
    margin: 0 auto;
  }

  .public-hero-portrait-image {
    width: 100%;
    height: auto;
    max-height: none;
    margin-bottom: 0;
    object-position: center bottom;
  }

  .public-hero-identity {
    left: 50%;
    bottom: clamp(2.25rem, 11vw, 3.5rem);
    transform: translateX(-50%);
  }
}

@media (max-width: 440px) {
  .public-hero-grid {
    gap: 1.25rem;
  }

  .public-hero-portrait-inner {
    width: min(112%, 25rem);
  }

  .public-hero-identity {
    bottom: 1.9rem;
    gap: 0.6rem;
    padding: 0.68rem 0.82rem;
  }

  .public-hero-identity-brand,
  .public-hero-identity-name {
    font-size: 0.62rem;
  }
}