:is(.catalog-hero, .industries-hero, .about-hero) {
  min-height: 570px;
  padding: 155px max(7vw, 70px) 80px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
}

.catalog-header {
  position: relative;
}

.catalog-hero {
  background-image:
    linear-gradient(
      105deg,
      rgba(4, 27, 54, 0.96) 0%,
      rgba(7, 47, 86, 0.84) 54%,
      rgba(7, 49, 91, 0.68) 100%
    ),
    url("../images/hero-industrial.webp");
  background-position: 58% center;
}

.industries-hero {
  background-image:
    linear-gradient(
      105deg,
      rgba(4, 27, 54, 0.96) 0%,
      rgba(7, 47, 86, 0.84) 54%,
      rgba(7, 49, 91, 0.68) 100%
    ),
    url("../images/hero-industrial.webp");
  background-position: 25% center;
}

.about-hero {
  background-image:
    linear-gradient(
      105deg,
      rgba(4, 27, 54, 0.96) 0%,
      rgba(7, 47, 86, 0.84) 54%,
      rgba(7, 49, 91, 0.68) 100%
    ),
    url("../images/industrial-engineering-enclosure.webp");
  background-position: center;
}

.resources-hero {
  background-image:
    linear-gradient(
      105deg,
      rgba(4, 27, 54, 0.94) 0%,
      rgba(7, 47, 86, 0.82) 52%,
      rgba(7, 49, 91, 0.68) 100%
    ),
    url("../images/resources-banner.webp");
}

:is(.catalog-hero, .industries-hero, .about-hero) > div:first-child {
  max-width: 880px;
}

:is(.catalog-hero, .industries-hero, .about-hero) h1 {
  max-width: 850px;
}

.catalog-hero-visual,
.industries-hero-media,
.about-hero-media {
  display: none;
}

@media (max-width: 850px) {
  :is(.catalog-hero, .industries-hero, .about-hero) {
    min-height: 535px;
    padding: 105px 22px 58px;
    background-position: 58% center;
  }

  :is(.catalog-hero, .industries-hero, .about-hero) h1 {
    font-size: clamp(38px, 10vw, 52px);
  }

  .resources-hero {
    gap: 34px;
  }
}