/* Shared typography and rhythm for the four Czech page heroes. */
.hero,
.catalog-hero {
  padding-top:clamp(64px,7vw,100px);
  padding-bottom:clamp(64px,7vw,100px);
}

.hero {
  align-items:start;
  align-content:start;
}

.hero .eyebrow,
.catalog-hero .eyebrow {
  margin:0 0 13px;
  color:#002066;
  font-family:"Fira Sans",Arial,sans-serif;
  font-size:13px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.hero h1,
.catalog-hero h1 {
  margin:0;
  color:#00051d;
  font-family:"Source Serif 4",Georgia,serif;
  font-size:clamp(52px,7vw,96px);
  font-weight:400;
  line-height:1;
  letter-spacing:-.02em;
}

.hero .intro,
.hero .hero-lead,
.catalog-hero .catalog-lead {
  max-width:760px;
  margin:28px 0 0;
  font-family:"Fira Sans",Arial,sans-serif;
  font-size:clamp(17px,1.4vw,21px);
  font-weight:300;
  line-height:1.55;
}

@media (max-width:820px) {
  .hero,
  .catalog-hero {
    padding-top:48px;
    padding-bottom:56px;
  }

  .hero h1,
  .catalog-hero h1 {
    font-size:clamp(46px,13vw,64px);
  }

  .hero .intro,
  .hero .hero-lead,
  .catalog-hero .catalog-lead {
    max-width:100%;
    font-size:17px;
  }
}