/* Block Mondo hero assets */

.home-hero,
.hero-section {
  padding: 96px 0;
  overflow: hidden;
  background-color: #031b35;
}

.home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
  gap: 56px;
  align-items: center;
}

.home-hero-copy {
  max-width: 660px;
}

.home-hero .bm-anchor-line {
  color: rgba(245,247,250,.76);
}

.home-hero-media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-hero-picture {
  display: block;
  width: 100%;
}

.home-hero-visual,
.hero-diagram {
  display: block;
  width: 100%;
  max-width: 700px;
  height: auto;
  border-radius: 0;
}

.how-it-works-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(360px, 1.15fr);
  gap: 56px;
  align-items: center;
}

.how-it-works-media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.how-it-works-visual {
  display: block;
  width: min(720px, 100%);
  height: auto;
}

@media (max-width: 980px) {
  .home-hero {
    padding: var(--bm-section-y-mobile, 56px) 0;
  }

  .home-hero-grid,
  .how-it-works-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .home-hero-copy {
    max-width: none;
  }

  .home-hero-media,
  .how-it-works-media {
    justify-content: flex-start;
  }

  .home-hero-visual,
  .how-it-works-visual {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .home-hero,
  .hero-section {
    padding: var(--bm-section-y-mobile, 56px) 0;
  }

  .home-hero-grid,
  .how-it-works-grid {
    gap: 30px;
  }

  .home-hero-media,
  .how-it-works-media {
    justify-content: center;
  }

  .home-hero-visual,
  .how-it-works-visual {
    max-width: 100%;
  }
}