.hero-block {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  min-height: 540px;
  height: clamp(540px, 55vw, 760px);
  overflow: hidden;
  color: #fff;
  background: #222531;
}
.hero-block__media, .hero-block__overlay { position: absolute; inset: 0; }
.hero-block__media { z-index: -1; overflow: hidden; }
.hero-block__bg { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-block__overlay { background: linear-gradient(90deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.46) 55%, rgba(0,0,0,.40) 100%); }
.hero-block__content {
  position: relative;
  z-index: 1;
  width: calc(100% - 2 * var(--container-padding));
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: clamp(95px, 11vw, 155px) 0 50px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  text-align: left;
}
.hero-block__title { max-width: 600px; margin: 0; font-size: clamp(35px, 4vw, 55px); line-height: 1.09; font-weight: 700; text-wrap: balance; }
.hero-block__description { max-width: 490px; margin: 0; font-size: clamp(16px, 1.45vw, 19px); line-height: 1.35; font-weight: 400; }
.hero-block__content > .btn { margin-top: 7px; }
/* Individual catalog pages: the title/description span the same 1500px content area as the section below. */
.hero-block--detail .hero-block__title,
.hero-block--detail .hero-block__description { max-width: 100%; }

@media (max-width: 720px) {
  .hero-block { height: 68svh; min-height: 470px; max-height: 670px; }
  .hero-block__content { width: calc(100% - 48px); padding-top: clamp(105px, 18vh, 155px); }
  .hero-block__title { font-size: clamp(31px, 7vw, 44px); max-width: 520px; }
  .hero-block__description { font-size: 16px; }
  .hero-block__overlay { background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.45)); }
}