#brand-story {
  position: relative;
  isolation: isolate;
  min-height: clamp(500px, 40vw, 580px);
  padding: clamp(72px, 9vw, 120px) clamp(20px, 6vw, 96px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-top: 0;
  background: #38443a;
}

#brand-story::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(12, 18, 14, .7) 0%, rgba(12, 18, 14, .48) 48%, rgba(12, 18, 14, .22) 100%);
}

#brand-story .brand-story-photo,
#brand-story .brand-story-photo img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}

#brand-story .brand-story-photo img {
  object-fit: cover;
  object-position: center 52%;
}

#brand-story .brand-story-inner {
  width: min(100%, 1160px);
  margin-inline: auto;
}

#brand-story .brand-story-lead h2,
#brand-story .brand-story-lead > p {
  color: #fff;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .28);
}

#brand-story .brand-story-lead > p {
  max-width: 38ch;
  word-break: keep-all;
  text-wrap: pretty;
}

@media (max-width: 700px) {
  #brand-story {
    min-height: clamp(480px, 145vw, 540px);
    padding: 64px 20px 56px;
  }

  #brand-story::after {
    background: linear-gradient(90deg, rgba(10, 16, 12, .72) 0%, rgba(10, 16, 12, .48) 72%, rgba(10, 16, 12, .28) 100%);
  }

  #brand-story .brand-story-photo img {
    object-position: 42% center;
  }

  #brand-story .brand-story-lead h2 {
    font-size: clamp(40px, 12.5vw, 54px);
  }

  #brand-story .brand-story-lead > p {
    margin-top: 28px;
  }
}