.sub-hero,
.blog-hero,
.article-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 430px;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background-color: #07100f;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.sub-hero::before,
.blog-hero::before,
.article-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: rgba(0, 0, 0, .68);
}

.sub-hero::after,
.blog-hero::after,
.article-hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(0, 0, 0, .56), transparent 76%);
}

.sub-hero .container,
.blog-hero .container {
  position: relative;
  z-index: 1;
}

.sub-hero h1,
.blog-hero h1,
.article-hero h1 {
  max-width: 940px;
}

.sub-hero .breadcrumbs,
.sub-hero .lead,
.blog-hero .breadcrumbs,
.blog-hero .lead,
.article-hero .breadcrumbs,
.article-hero .post-meta {
  color: #eef3f1;
  text-shadow: 0 2px 18px #000;
}

.article {
  width: 100%;
  max-width: none;
  padding-top: 0;
}

.article > .article-content {
  width: min(calc(100% - 40px), 860px);
  margin-right: auto;
  margin-left: auto;
}

.article-hero {
  width: 100%;
  min-height: 520px;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  margin: 0 0 54px;
  padding: 120px max(20px, calc((100vw - 860px) / 2)) 72px;
}

.article-hero .breadcrumbs,
.article-hero h1,
.article-hero .post-meta {
  width: min(100%, 860px);
  margin-right: auto;
  margin-left: auto;
}

.article-hero h1 {
  margin-top: 22px;
  margin-bottom: 24px;
  font-size: clamp(2.45rem, 5.5vw, 4.8rem);
}

.article-hero .post-category {
  color: var(--lime);
}

[data-hero-key="services-field-installation"] {
  background-image: url("../images/heroes/services-field-installation.webp");
}

[data-hero-key="products-industrial-battery-range"] {
  background-image: url("../images/heroes/products-industrial-battery-range.webp");
}

[data-hero-key="reviews-handover"] {
  background-image: url("../images/heroes/reviews-handover.webp");
}

[data-hero-key="faq-technical-consultation"] {
  background-image: url("../images/heroes/faq-technical-consultation.webp");
}

[data-hero-key="contact-site-assessment"] {
  background-image: url("../images/heroes/contact-site-assessment.webp");
}

[data-hero-key="privacy-secure-consultation"] {
  background-image: url("../images/heroes/privacy-secure-consultation.webp");
}

[data-hero-key="blog-field-guides"] {
  background-image: url("../images/heroes/blog-field-guides.webp");
}

[data-hero-key="category-ups-emergency"] {
  background-image: url("../images/heroes/category-ups-emergency.webp");
}

[data-hero-key="category-motive-deep-cycle"] {
  background-image: url("../images/heroes/category-motive-deep-cycle.webp");
}

[data-hero-key="category-battery-selection"] {
  background-image: url("../images/heroes/category-battery-selection.webp");
}

[data-hero-key="category-safety-recycling"] {
  background-image: url("../images/heroes/category-safety-recycling.webp");
}

[data-hero-key="agm-vs-flooded-lead-acid"] {
  background-image: url("../images/og/agm-vs-flooded-lead-acid.webp");
}

[data-hero-key="battery-room-temperature"] {
  background-image: url("../images/og/battery-room-temperature.webp");
}

[data-hero-key="deep-cycle-lifespan-management"] {
  background-image: url("../images/og/deep-cycle-lifespan-management.webp");
}

[data-hero-key="forklift-charging-safety"] {
  background-image: url("../images/og/forklift-charging-safety.webp");
}

[data-hero-key="generator-start-battery-check"] {
  background-image: url("../images/og/generator-start-battery-check.webp");
}

[data-hero-key="lifepo4-retrofit-checklist"] {
  background-image: url("../images/og/lifepo4-retrofit-checklist.webp");
}

[data-hero-key="used-battery-recycling-checklist"] {
  background-image: url("../images/og/used-battery-recycling-checklist.webp");
}

[data-hero-key="ups-replacement-signs"] {
  background-image: url("../images/og/ups-replacement-signs.webp");
}

[data-hero-key="ups-runtime-calculation"] {
  background-image: url("../images/og/ups-runtime-calculation.webp");
}

@media (max-width: 620px) {
  .sub-hero,
  .blog-hero {
    min-height: 390px;
    background-position: 62% center;
  }

  .article-hero {
    min-height: 500px;
    margin-bottom: 38px;
    padding-top: 102px;
    padding-bottom: 56px;
    background-position: 60% center;
  }

  .article > .article-content {
    width: min(calc(100% - 28px), 860px);
  }

  .sub-hero::before,
  .blog-hero::before,
  .article-hero::before {
    background: rgba(0, 0, 0, .76);
  }

  [data-hero-key="services-field-installation"] {
    background-image: url("../images/heroes/services-field-installation-960.webp");
  }

  [data-hero-key="products-industrial-battery-range"] {
    background-image: url("../images/heroes/products-industrial-battery-range-960.webp");
  }

  [data-hero-key="reviews-handover"] {
    background-image: url("../images/heroes/reviews-handover-960.webp");
  }

  [data-hero-key="faq-technical-consultation"] {
    background-image: url("../images/heroes/faq-technical-consultation-960.webp");
  }

  [data-hero-key="contact-site-assessment"] {
    background-image: url("../images/heroes/contact-site-assessment-960.webp");
  }

  [data-hero-key="privacy-secure-consultation"] {
    background-image: url("../images/heroes/privacy-secure-consultation-960.webp");
  }

  [data-hero-key="blog-field-guides"] {
    background-image: url("../images/heroes/blog-field-guides-960.webp");
  }

  [data-hero-key="category-ups-emergency"] {
    background-image: url("../images/heroes/category-ups-emergency-960.webp");
  }

  [data-hero-key="category-motive-deep-cycle"] {
    background-image: url("../images/heroes/category-motive-deep-cycle-960.webp");
  }

  [data-hero-key="category-battery-selection"] {
    background-image: url("../images/heroes/category-battery-selection-960.webp");
  }

  [data-hero-key="category-safety-recycling"] {
    background-image: url("../images/heroes/category-safety-recycling-960.webp");
  }
}